angularjs $ window.onclick работает лучше, чем ng-click - PullRequest
Новая
       18

angularjs $ window.onclick работает лучше, чем ng-click

0 голосов
/ 07 марта 2019

У меня был сценарий, в котором я должен был внести некоторые изменения в локальное хранилище, а также в некоторые другие данные контроллера, эта логика должна была быть сделана по щелчку в любом месте всей страницы.Этот код должен был закрыть все средства выбора цвета, если щелчок был сделан в любом месте на теле, но не на кнопке средства выбора цвета, но если щелкнуть кнопку средства выбора цвета, закройте все остальные средства выбора цвета и откройте только соответствующий.Сначала я попытался использовать ng-click, который работал нормально, но темп закрытия всех палитр цветов и открытия соответствующего был очень медленным.

Обратите внимание, что я пытался использовать $scope.$apply();, но это не сработало, а вместо этогоначал давать мне ошибку, что пищеварение angularjs уже идет.Затем я использовал $window.onclick, который работал отлично, и темп закрытия и открытия колпачков также был очень хорошим.Мне интересно, почему $window.onclick работал лучше, чем ng-click.Эта функция выглядит следующим образом: 

$window.onclick = function (e) {
        var labels = getAllLabels(vm.allData);
        if (!e.target.classList.contains('color-picker-button') || e.target.classList.contains('color-picker-popup') || e.target.classList.contains('buttons-popup-charts')) {
            for (var i = 0; i < labels.length; i++) {
                labels[i].isOpen = false;
                localStorageService.set(labels[i].name + '-isOpen-alpha', false);
            }
            init();
        }
        if (e.target.classList.contains('legends-charts')) {
            var id = e.target.id;
            for (var i = 0; i < labels.length; i++) {
                if (labels[i].name === id) {
                    labels[i].isOpen = !labels[i].isOpen;
                } else {
                    labels[i].isOpen = false;
                }
                localStorageService.set(labels[i].name + '-isOpen-alpha', labels[i].isOpen);
            }
            init();
        }
    };

1 Ответ

1 голос
/ 08 марта 2019

$window является ссылкой на объект браузера window.(Подробности см. Здесь: https://docs.angularjs.org/api/ng/service/$window)

ng-click вызывает цикл дайджеста через $scope.$apply. (Подробности здесь: https://docs.angularjs.org/guide/scope)

Соответствующая часть:

Директивы слушателя, такие как ng-click, регистрируют слушателя в DOM. Когда срабатывает слушатель DOM, директива выполняет соответствующее выражение и обновляет представление, используя метод $ apply ().

Следовательно, $window.onclick выполняется быстрее, потому что не вызывает цикл дайджеста.

...