Angular JS - 如何使用jqLit​​e选择除给定元素之外的任何内容？

Question

我正在编写一个指令来处理移动应用程序中的侧边菜单。我可以使用我创建的指令打开菜单，但是我需要能够选择除了菜单和jqLit​​e之外的所有内容，这样我就可以绑定一个click事件来关闭菜单，除非单击菜单。< / p>

我的指示目前是：

  .directive('asideMenuButton', [function() {
    return {
      restrict: 'A',
      link: function(scope, $el, attrs) {
        $el.on('click', function(e) {
          e.preventDefault();

          var $aside = angular.element(document.getElementById(attrs.parent));

          if ($aside.hasClass('active')) {
            $aside.removeClass('active');
          } else {
            $aside.addClass('active');
          }
        });
      }
    };
  }]);

基本用法如下：

<a aside-menu-button href="#" data-parent="<aside ID>">Link</a>

如何在jqLit​​e中获取除菜单之外的任何元素？

编辑：我的最终解决方案如下：

angular.module('wowpr.directives', [])
  .directive('asideMenuButton', [function() {
    return {
      restrict: 'A',
      link: function(scope, $el, attrs) {
        var $aside = angular.element(document.getElementById(attrs.parent));
        var $body  = angular.element(document.getElementsByTagName('body'));

        $body.on('click', function(e) {
          if ($aside.hasClass('active')) {
            $aside.removeClass('active');
          }
        });

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

        $el.on('click', function(e) {
          e.preventDefault();
          e.stopPropagation();

          if ($aside.hasClass('active')) {
            $aside.removeClass('active');
          } else {
            $aside.addClass('active');
          }
        });
      }
    };
  }]);

它不检查正文单击事件以查看被单击的元素是否是菜单，而是当您单击菜单时它会停止传播到正文的单击事件的传播。这样，当您单击菜单时，它不会触发正文单击事件。

Answer 1

将click事件绑定到document或body元素。然后检查目标元素是否不是菜单的一部分。如果它没有关闭菜单。

angular.element(document).on("click",function(e){
   if( !angular.element(e.target).hasClass("someMenuClass") ) {
       closeMenu();
   }
});