Хобрук: Ваш путь к мастерству в программировании

angularjs оператор if/else и ширина окна

Я новичок в AngularJS и недавно представил его в своем приложении. Я пытаюсь переписать часть моего существующего кода jQuery в своих контроллерах, однако однажды я использую:

jQuery:

if ($(window).width() < 700) {

   $('.productsHeading').on('click', function() {

       $(".productsBody").hide();
       $(".aboutUsBody").show();

   });
}

Я могу обойти .hide() и .show(), используя ng-hide="productsBody" и ng-hide="aboutUsBody" в своих DIV. Они обрабатываются через ng-click="productsheading()". Однако проблема, с которой я сталкиваюсь, заключается в том, как мне справиться с:

if ($(window).width() < 700) {

В АнгулярДжС? Я использую AngularJS v1.1.5.

javascript jquery angularjs angularjs-directive angularjs-scope
15.04.2014

Ответы:


1

В AngularJS, если вы хотите внести изменения в манипуляции с HTML или DOM, рекомендуется или лучше всего использовать директиву для того же.

Напишите директиву, может быть ниже ссылки полезны:

Событие AngularJS при изменении размера внутренней ширины окна

http://jsfiddle.net/jaredwilli/SfJ8c/

HTML для директивы

<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>window.height: {{windowHeight}}
    <br />window.width: {{windowWidth}}
    <br />
</div>

Код Javascript для директивы

    app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        scope.getWindowDimensions = function () {
            return {
                'h': w.height(),
                'w': w.width()
            };
        };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

            scope.style = function () {
                return {
                    'height': (newValue.h - 100) + 'px',
                        'width': (newValue.w - 100) + 'px'
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
})
15.04.2014
  • Не могли бы вы объяснить код здесь? Для чего нужны scope.style и - 100, где вы повторно используете 'h' : w.height() 18.12.2016
  • Scope.style — это функция, вызываемая из HTML. Направьте этот URL-адрес для получения подробной информации jsfiddle.net/jaredwilli/SfJ8c 20.12.2016

    • 2

    Большинство реализаций, которые вы найдете для получения размеров элементов, будут иметь различное поведение в зависимости от браузера.

    Лучше всего использовать метод jQuery width, который будет иметь одинаковый результат в любом браузере.

    Кстати, нет необходимости полностью удалять jQuery, если вы переходите на Angular.

    Для некоторых функций jQuery, вероятно, предложит наилучшую реализацию.

    15.04.2014
    Новые материалы
    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..