javascript - 如何使用 AngularJS 处理文档点击并通知其他 Controller ？

标签 javascript angularjs

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

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

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

更新:

根据回答的建议，我采用了 Brodcast 方法并更新了脚本以反射(reflect)我的最新更改。它按照我的预期工作。我让 globalController $broadcast 一条消息，然后 menuController 订阅了这条消息。

更新 2:修改代码以注入(inject)全局事件定义数据。

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

最佳答案

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

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.) 将菜单做成一个服务，然后将它注入(inject)到所有需要能够控制它的 Controller 中。

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

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

关于javascript - 如何使用 AngularJS 处理文档点击并通知其他 Controller ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19602482/

上一篇：javascript - 如何在 JavaScript 中取消移位或添加到参数对象的开头

下一篇：javascript - 如何显示用于测试的 jQuery 变量的值？

相关文章：

javascript - 使用我的 if 语句更精确

javascript - AngularJS Material 导入后无法正常工作

javascript - Angular js触发路由

javascript - 删除小屏幕/移动设备上的输入占位符，但在调整到桌面大小时再次添加它们

javascript - 1000 个元素的 Jquery 可拖动性能与重新渲染元素的对比

javascript - 倒计时按钮 angularjs

javascript - 为什么在 $rootScope.$on 中需要 $rootScope.$apply？

javascript - 是否可以在 Visual Studio Pre Build 事件中添加监视 ng build 的更改？

javascript - Draft-js 编辑器导致反向输入

javascript - 如果将 matTableDataSource 放入类似 angular 的 hashmap 结构中，如何进行排序和分页

©2024 IT工具网  联系我们