javascript - 从文档绑定(bind)事件触发时，ngClass 类更改很慢

Question

我在 Angular 中构建了一个下拉菜单元素指令。 ng单击菜单按钮可切换菜单并无缝工作。但是，当单击发生在外部时，我的 $document.click 绑定(bind)会关闭菜单，需要几秒钟的时间才能发生。

我已在绑定(bind)和 closeMenu 作用域函数上放置了一个断点。这两种情况都会立即发生，但是由我的 ngClass 属性导致的类更改似乎不会在一两秒内更改元素的类。

在 this video ，我演示了关闭下拉菜单的两种方法:首先，通过单击下拉按钮，该按钮通过 ngClick 触发一个函数来更改 menuActive ，从而关闭事件类。其次，通过单击菜单外部来触发 $document 的单击事件来更改与第一种方法相同的作用域变量。可以看到不使用下拉菜单按钮关闭时大约有2秒的延迟。

这是我的指令:

angular.module('dropdownDirective', [])
    .directive('dropdown', function($document) {
        'use strict';
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                ngIcon: '@',
                ngCaret: '@',
                ngLabel: '@'
            },
            templateUrl: '/gridsmart-web-client/directives/dropdown/dropdown.html',
            link: function(scope, element) {
                var handler = function(event) {
                    if (!element[0].contains(event.target)) {
                        scope.closeMenu();
                    }
                };

                $document.on('click', handler);
                scope.$on('$destroy', function() {
                    $document.off('click', handler);
                });

                scope.clicked = false;
                scope.positionDropdown = function() {
                    if (!scope.clicked) {
                        scope.clicked = true;
                        scope.buttonHeight = element.find('button')[0].offsetHeight + 'px';
                    }
                };
            },
            controller: function($scope) {
                $scope.menuActive = false;
                $scope.toggleMenu = function () {
                    $scope.positionDropdown();
                    $scope.menuActive = !$scope.menuActive;
                };
                $scope.closeMenu = function() {
                    $scope.menuActive = false;
                };
            }
        };
    });

这是下拉菜单的模板:

<div class="dropdown" ng-class="{active: menuActive}">
    <button ng-click="toggleMenu()">{{ngLabel}}<i ng-class="ngIcon" ng-if="ngIcon"></i><b class="caret" ng-if="ngCaret"></b></button>
    <ul ng-show="menuActive" ng-style="{'top': buttonHeight}" ng-transclude>
    </ul>
</div>

按钮的 ngClick 只是切换 menuActive 的值。由于 $document.click 绑定(bind)操作相同的变量，我无法想象为什么类更改会慢得多。

Answer 1

尝试在事件处理程序中调用$apply():

$document.on('click', function(event) {
    handler(event);
    scope.$apply();
});