如何使用 AngularJS 处理文档点击并通知其他控制器？答案

【问题标题】：How to handle document click and notify other controllers using AngularJS?如何使用 AngularJS 处理文档点击并通知其他控制器？
【发布时间】：2013-10-26 03:29:24
【问题描述】：

我使用 AngularJS 创建了一个水平下拉菜单。

菜单部分由名为 menuController 的角度控制器管理。实现了标准菜单行为，因此在悬停时主菜单项会突出显示，除非它被禁用。单击主菜单项时，子菜单会切换。如果子菜单处于打开状态，我希望它在用户单击文档上的其他任何位置时消失。我试图创建一个指令来监听文档点击事件，但不确定如何通知菜单控制器。我应该如何以 AngularJS 的方式实现这个场景？

部分工作Original Plunk没有文档点击处理机制。

更新：

根据已回答的建议，我采用 Brodcast 方法并更新了脚本以反映我的最新更改。它按照我的期望工作。我为 globalController $broadcast 设置了一条消息，然后 menuController 订阅了该消息。

更新 2： 修改代码以注入全局事件定义数据。

var eventDefs = (function() {
  return {
    common_changenotification_on_document_click: 'common.changenotification.on.document.click'
  };
}());

var changeNotificationApp = angular.module('changeNotificationApp', []);

changeNotificationApp.value('appEvents', eventDefs);

changeNotificationApp.directive("onGlobalClick", ['$document', '$parse',
  function($document, $parse) {
    return {
      restrict: 'A',
      link: function($scope, $element, $attributes) {
        var scopeExpression = $attributes.onGlobalClick;

        var invoker = $parse(scopeExpression);

        $document.on("click",
          function(event) {
            $scope.$apply(function() {
              invoker($scope, {
                $event: event
              });
            });
          }
        );
      }
    };
  }
]);

changeNotificationApp.controller("globalController", ['$scope', 'appEvents',
  function($scope, appEvents) {
    $scope.handleClick = function(event) {
      $scope.$broadcast(appEvents.common_changenotification_on_document_click, {
        target: event.target
      });
    };
  }
]);

//menu-controller.js
changeNotificationApp.controller('menuController', ['$scope', '$window', 'appEvents',
  function($scope, $window, appEvents) {

    $scope.IsLocalMenuClicked = false;

    $scope.menu = [{
      Name: "INTEGRATION",
      Tag: "integration",
      IsDisabled: false,
      IsSelected: false,
      SubMenu: [{
        Name: "SRC Messages",
        Tag: "ncs-notifications",
        IsDisabled: false,
        AspNetMvcController: "SearchSRCMessages"
      }, {
        Name: "Target Messages",
        Tag: "advisor-notifications",
        IsDisabled: false,
        AspNetMvcController: "SearchTaregtMessages"
      }]
    }, {
      Name: "AUDITING",
      Tag: "auditing",
      IsDisabled: true,
      IsSelected: false,
      SubMenu: []
    }];

    $scope.appInfo = {
      Version: "1.0.0.0",
      User: "VB",
      Server: "azzcvy0623401v",
      IsSelected: false
    };

    var resetMenu = function() {
      angular.forEach($scope.menu, function(item) {
        item.IsSelected = false;
      });
      $scope.appInfo.IsSelected = false;
    };

    $scope.toggleDropDownMenu = function(menuItem) {
      var currentDropDownState = menuItem.IsSelected;
      resetMenu($scope.menu, $scope.appInfo);
      menuItem.IsSelected = !currentDropDownState;
      $scope.IsLocalMenuClicked = true;
    };

    $scope.loadPage = function(menuItem) {
      if (menuItem.AspNetMvcController)
        $window.location.href = menuItem.AspNetMvcController;
    };

    $scope.$on(appEvents.common_changenotification_on_document_click,
      function(event, data) {
        if (!$scope.IsLocalMenuClicked)
          resetMenu($scope.menu, $scope.appInfo);
        $scope.IsLocalMenuClicked = false;
      });
  }
]);

更新 3： 修改了先前实现中的代码，以修复文档点击多次触发的错误。几乎类似的方法，但是这一次，如果任何人再次单击菜单上的任何位置，则单击将被忽略。完整代码示例请参考New Working Plunk

    changeNotificationApp.directive("onGlobalClick", ['$document', '$parse',
    function ($document, $parse) {
        return {
            restrict: 'A',
            link: function ($scope, $element, $attributes) {
                var scopeExpression = $attributes.onGlobalClick;

                var invoker = $parse(scopeExpression);

                $document.on("click",
                    function (event) {
                       var isClickedElementIsChildOfThisElement = $element.find(event.target).length > 0;
                            if (isClickedElementIsChildOfThisElement) return;
                        $scope.$apply(function () {
                            invoker($scope, {
                                $event: event
                            });
                        });
                    }
                );
            }
        };
    }
]);

更新 4： 实施了另一个替代选项。完整代码示例请参考Option 2 Plunk

    var eventDefs = (function () {
    return {
        on_click_anywhere: 'common.changenotification.on.document.click'
    };
}());

var changeNotificationApp = angular.module('changeNotificationApp', []);

changeNotificationApp.value('appEvents', eventDefs);

changeNotificationApp.directive("onClickAnywhere", ['$window', 'appEvents',
  function($window, appEvents) {
    return {
      link: function($scope, $element) {
        angular.element($window).on('click', function(e) {
          // Namespacing events with name of directive + event to avoid collisions
          $scope.$broadcast(appEvents.on_click_anywhere, e.target);
        });
      }
    };
  }
]);

//menu-controller.js
changeNotificationApp.controller('menuController', ['$scope', '$window', 'appEvents', '$element',
    function ($scope, $window, appEvents, $element) {

        $scope.menu = [
            {
                Name: "INTEGRATION",
                Tag: "integration",
                IsDisabled: false,
                IsSelected: false,
                SubMenu: [
                    {
                        Name: "SRC Messages",
                        Tag: "ncs-notifications",
                        IsDisabled: false,
                        AspNetMvcController: "SearchSRCMessages"
                    },
                    {
                        Name: "Target Messages",
                        Tag: "advisor-notifications",
                        IsDisabled: false,
                        AspNetMvcController: "SearchTaregtMessages"
                    }
                ]
            },
            {
                Name: "AUDITING",
                Tag: "auditing",
                IsDisabled: true,
                IsSelected: false,
                SubMenu: []
            }
        ];

        $scope.appInfo = {
            Version: "1.0.0.0",
            User: "VB",
            Server: "azzcvy0623401v",
            IsSelected: false
        };

        var resetMenu = function () {
            angular.forEach($scope.menu, function (item) {
                item.IsSelected = false;
            });
            $scope.appInfo.IsSelected = false;
        };

        $scope.toggleDropDownMenu = function (menuItem) {
            var currentDropDownState = menuItem.IsSelected;
            resetMenu($scope.menu, $scope.appInfo);
            menuItem.IsSelected = !currentDropDownState;
        };

        $scope.loadPage = function (menuItem) {
            if (menuItem.AspNetMvcController)
                $window.location.href = menuItem.AspNetMvcController;
        };

        $scope.$on(appEvents.on_click_anywhere, function(event, targetElement) {
          var isClickedElementIsChildOfThisElement = $element.find(targetElement).length > 0;
          if (isClickedElementIsChildOfThisElement) return;

          $scope.$apply(function(){
            resetMenu($scope.menu, $scope.appInfo);
          });
        });
    }
]);

【问题讨论】：

我已经用完整的工作示例更新了上面提到的 plunk，还更新了上面帖子中列出的 java 脚本源代码。

标签： javascript angularjs

【解决方案1】：

你可以把指令简化成这样：

changeNotificationApp.directive('onDocumentClick', ['$document',
  function($document) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {

        var onClick = function() {
          scope.$apply(function() {
            scope.$eval(attrs.onDocumentClick);
          });
        };

        $document.on('click', onClick);

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

然后从 menuController 传递一个函数给它：

<section class="local-nav" ng-controller="menuController" on-document-click="someFunction()">

这种方式不需要 globalController。

如果你想保留 globalController 并从那里处理它，你可以：

1.) 将菜单制作成服务，然后将其注入到所有需要能够控制它的控制器中。

2.) 从 globalController 广播一个事件并在 menuController 中监听它。

具体的替代解决方案：您可以将指令转换为“on-outside-element-click”并像这样使用它：

<ul on-outside-element-click="closeMenus()">

该指令看起来像这样，如果您在ul之外点击，只会调用closeMenus()：

changeNotificationApp.directive('onOutsideElementClick', ['$document',
  function($document) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {

        element.on('click', function(e) {
          e.stopPropagation();
        });

        var onClick = function() {
          scope.$apply(function() {
            scope.$eval(attrs.onOutsideElementClick);
          });
        };

        $document.on('click', onClick);

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

工作插件：http://plnkr.co/edit/zVo0fL2wOCQb3eAUx44U?p=preview

【讨论】：

你在这里推荐的东西肯定会奏效。我选择了您的选项 2 广播方法。我的想法是，不仅仅是菜单，如果应用程序的其他部分必须在文档点击时执行特定操作，它们也可以监听相同的消息。同时尽量避免 stopPropogation。
这个方案更优雅。
感谢on-outside-element-click，这正是我所需要的，不过将其改为使用mouseup。

【解决方案2】：

嗯，你做得很好。如果您对 menuController 应用相同的指令

<section class="local-nav" ng-controller="menuController"  on-global-click="handleClick($event)>

并在您的menuController 中定义点击处理程序，您就可以开始了。

我认为为文档上的事件设置多个处理程序没有任何害处。因此，无论您在何处定义此指令，该元素都可以响应全局文档点击事件。

更新：当我对此进行测试时，它会导致另一个问题，即在您单击页面的位置调用此方法。你现在需要一种机制来区分。

【讨论】：

同意，尝试在 plunkr 中使用上述答案中提到的广播/开启方法并遇到同样的问题，需要在广播事件之前检查该处理程序以查看点击的内容是否为按钮在这种情况下它不应该隐藏菜单（按钮点击处理程序应该只是切换菜单）