1

我目前正在编写一个指令来处理移动应用程序中的侧边菜单。我可以使用我创建的指令很好地打开菜单，但是我需要能够使用 jqLit​​e 选择除菜单之外的所有内容，以便在单击菜单以外的任何内容时绑定单击事件以关闭菜单。

我的指令目前是：

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

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

4

1 回答 1

4

将点击事件绑定到文档或正文元素。然后检查目标元素是否不是菜单的一部分。如果不是关闭菜单。

angular.element(document).on("click",function(e){
   if( !angular.element(e.target).hasClass("someMenuClass") ) {
       closeMenu();
   }
});
于 2014-03-17T22:11:34.140 回答