angularjs - 测试指令中正文点击的最有 Angular 的方法是什么？

Question

我有一个应用于导航元素的小下拉指令。如果用户通过设置 $scope.menu.visible = false 点击导航元素之外的任何地方，我想关闭下拉菜单。

从 Angular 指令中检查 body 元素上的点击或按键的最 Angular 方法是什么？

我目前的指令是这样的:

angular.module('dropdowns', [])
  .directive('dropdown', function () {
    return {
      scope: true,
      link: function (scope, element) {
        var body = angular.element('body');
        var clickOutside = function (e) {
          var target = angular.element(e.target);
          if (!$.contains(element, target)) {
            scope.menu.visible = false;
          }
        }
        body.on('click', clickOutside);
        // body.on('keyup', scope.escapeKey);
      },
      controller: function($scope) {
        $scope.menu = {visible: false};
        $scope.hide = function () {
          $scope.menu.visible = false;
        };

        $scope.show = function () {
          scope.menu.visible = true;
        };

        $scope.toggle = function (e) {
          $scope.menu.visible = !$scope.menu.visible;
        };

        $scope.escapeKey = function (e) {
          if (e.which === 27) {
            $scope.hide();
          }
        };
      }
    };
  });

下拉菜单是使用以下模板片段设置的:

<nav dropdown>
  <a ng-click="toggle()">Menu</a>
  <ul ng-show="menu.visible">
    ...
  </ul>
</nav>

Answer 1

最有 Angular 的方式:将其添加到指令中。示例:将点击事件属性添加到“body”标签像这样的东西:

angular.module('directive_name', []).directive('clickEvents', [
    '$rootScope',
    '$document',
  function($rootScope, $document) {
    return {
      link: function() {
        $document.bind('click', function(event) {
          $rootScope.$broadcast('click', event);
        });
      }
    };
  }
]);

module.directive('directive_name', [
  function() {
    return {
      link: function(scope, element, attributes) {
        scope.$on('click', function(onEvent, clickEvent) {
          scope.clicked = true;
        });
      }
    };
  }
]);