8

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

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

部分工作的原始 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);
          });
        });
    }
]);
4

2 回答 2

18

您可以将指令简化为如下所示：

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()">

closeMenus()该指令看起来像这样，并且只有在您单击外部时才会调用ul：

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);
        });
      }
    };
  }
]);

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

于 2013-10-26T04:23:53.757 回答
1

好吧，你已经把事情做好了。如果您在menuController

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

并在您的文件中定义点击处理程序，menuController一切就绪。

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

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

于 2013-10-26T04:25:18.983 回答