angularjs $ window.onclick比单击更好

Question

我有一个场景，我必须在localstorage以及控制器的其他一些数据中进行一些更改，这个逻辑应该是在整个页面的任何位置点击完成的。如果点击是在身体的任何地方进行而不是在颜色选择器按钮上进行，则此代码应该关闭所有采样器，但如果单击颜色选择器按钮，则关闭所有其他颜色选择器并仅打开相应的颜色选择器。首先，我尝试使用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();
        }
    };

Answer 1

$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执行得更快，因为它不会导致摘要周期。