当由文档绑定事件触发时，ngClass类的变化很慢

ngClass class change is slow when triggered from document-bound event

本文关键字：ngClass 变化 文档 绑定 事件      更新时间：2023-09-26

我已经在Angular中构建了一个下拉菜单元素指令。点击菜单按钮可以切换菜单，并且可以无缝地工作。但是，我的$document.click绑定在点击发生时关闭菜单需要几秒钟的时间。

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

在这个视频中，我已经演示了关闭下拉菜单的两种方法:首先，通过点击下拉按钮，通过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绑定操作相同的变量，我无法想象为什么类的更改会慢得多。

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

$document.on('click', function(event) {
    handler(event);
    scope.$apply();
});
相关文章：