Question

Twitter Bootstrap dropdown嵌套在tr内。 tr可通过ng-click点击。单击页面上的任意位置将折叠下拉菜单。该行为通过$document.bind('click', closeMenu)指令定义。

因此，当菜单打开，并且用户点击一行时，我希望菜单关闭（就像它一样）并且我想阻止该行上的点击事件。

JSFiddle：http://jsfiddle.net/LMc2f/1/
JSFiddle +指令内联：http://jsfiddle.net/9DM8U/1/

ui-bootstrap-tpls-0.10.0.js的相关代码：

angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['$document', '$location', function ($document, $location) {
  var openElement = null,
      closeMenu   = angular.noop;
  return {
    restrict: 'CA',
    link: function(scope, element, attrs) {
      scope.$watch('$location.path', function() { closeMenu(); });
      element.parent().bind('click', function() { closeMenu(); });
      element.bind('click', function (event) {

        var elementWasOpen = (element === openElement);

        event.preventDefault();
        event.stopPropagation();

        if (!!openElement) {
          closeMenu();
        }

        if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) {
          element.parent().addClass('open');
          openElement = element;
          closeMenu = function (event) {
            if (event) {
              event.preventDefault();
              event.stopPropagation();
            }
            $document.unbind('click', closeMenu);
            element.parent().removeClass('open');
            closeMenu = angular.noop;
            openElement = null;
          };
          $document.bind('click', closeMenu);
        }
      });
    }
  };
}]);

我无法弄清楚如何阻止ng-click内的基础closeMenu事件。

注意：我找不到访问$event的方法，因此我无法尝试$event.stopPropagation()。

Answer 1

我倾向于从模板本身中调用$event.stopPropagation()。与事件相关的逻辑很可能属于那里。应该使单元测试更容易。看模板的人也会知道事件没有查看底层控制器而没有冒出来。

<div ng-click="parentHandler()">
    <div ng-click="childHandler(); $event.stopPropagation()"></div>
</div>

Answer 2

dropdown指令绑定文档上的click事件，但是当您单击该行时，事件开始从目标元素向下传播到根文档节点（td - ＆gt; tr - ＆gt; table - ＆gt; document）。

这就是为什么你的ng-click处理程序总是被调用，即使该指令在文档点击时“停止”了气泡。

解决方法是在添加文档的单击处理程序时使用 useCapture 标志。

启动捕获后，指定类型的所有事件都将成为在被派遣到任何人之前派遣到注册的听众 DOM树下面的EventTarget。 ^mdn

现在，要指示dropdown指令使用您自己的处理程序，您需要更改指令的源。但这是第三方指令，出于维护原因，您可能不希望这样做。

这是强大的角度$装饰器开始的地方。您可以使用$ decorator动态更改第三方模块的源，而不实际触及实际的源文件。

因此，使用装饰器，并在文档节点上使用自定义事件处理程序，这就是您可以使该下拉列表的行为：

FIDDLE

var myApp = angular.module('myApp', []);

/**
 * Original dropdownToggle directive from ui-bootstrap.
 * Nothing changed here.
 */
myApp.directive('dropdownToggle', ['$document', '$location', function ($document, $location) {
  var openElement = null,
      closeMenu   = angular.noop;
  return {
    restrict: 'CA',
    link: function(scope, element, attrs) {
      scope.$watch('$location.path', function() { closeMenu(); });
      element.parent().bind('click', function() { closeMenu(); });
      element.bind('click', function (event) {

        var elementWasOpen = (element === openElement);

        event.preventDefault();
        event.stopPropagation();

        if (!!openElement) {
          closeMenu();
        }

        if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) {
          element.parent().addClass('open');
          openElement = element;
          closeMenu = function (event) {
            if (event) {
              event.preventDefault();
              event.stopPropagation();
            }
            $document.unbind('click', closeMenu);
            element.parent().removeClass('open');
            closeMenu = angular.noop;
            openElement = null;
          };
          $document.bind('click', closeMenu); /* <--- CAUSE OF ALL PROBLEMS ----- */
        }
      });
    }
  };
}]);


/**
 * This is were we decorate the dropdownToggle directive
 * in order to change the way the document click handler works
 */
myApp.config(function($provide){
  'use strict';

  $provide.decorator('dropdownToggleDirective', [
      '$delegate',
      '$document',
      function ($delegate, $document) {

        var directive = $delegate[0];
        var openElement = null;
        var closeMenu = angular.noop;

        function handler(e){
            var elm = angular.element(e.target);
          if(!elm.parents('.dropdown-menu').length){
            e.stopPropagation();
            e.preventDefault();
          }
          closeMenu();
          // After closing the menu, we remove the all-seeing handler
          // to allow the application click events to work nnormally
          $document[0].removeEventListener('click', handler, true);
        }

        directive.compile = function(){
          return function(scope, element) {
            scope.$watch('$location.path', closeMenu);
            element.parent().bind('click', closeMenu);
            element.bind('click', function (event) {

              var elementWasOpen = (element === openElement);

              event.preventDefault();
              event.stopPropagation();

              if (!!openElement) {
                closeMenu();
              }

              if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) {
                element.parent().addClass('open');
                openElement = element;
                closeMenu = function (event) {
                  if (event) {
                    event.preventDefault();
                    event.stopPropagation();
                  }
                  $document.unbind('click', closeMenu);
                  element.parent().removeClass('open');
                  closeMenu = angular.noop;
                  openElement = null;
                };


                // We attach the click handler by specifying the third "useCapture" parameter as true
                $document[0].addEventListener('click', handler, true);
              }
            });
          };
        };

        return $delegate;
      }
  ]);

});

更新：

请注意，更新的自定义处理程序将阻止冒泡，除非目标元素是实际的下拉选项。这将解决即使单击下拉选项时阻止点击事件的问题。

这仍然不会阻止事件向下冒泡到行（来自下拉选项），但这与下拉指令没有任何关系。无论如何，为了防止这种冒泡，您可以将$event对象传递给ng-click表达式函数，并使用该对象阻止偶数向下冒泡到表格行：

<div ng-controller="DropdownCtrl">
  <table>
    <tr ng-click="clicked('row')">
      <td>

        <div class="btn-group">
          <button type="button" class="btn btn-default dropdown-toggle">
            Action <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li ng-repeat="choice in items">
              <a ng-click="clicked('link element', $event)">{{choice}}</a>
            </li>
          </ul>
        </div>

      </td>
    </tr>
  </table>
</div>

function DropdownCtrl($scope) {
  $scope.items = [
    "Action",
    "Another action",
    "Something else here"
  ];

  $scope.clicked = function(what, event) {
    alert(what + ' clicked');
    if(event){
      event.stopPropagation();
      event.preventDefault();
    }
  }

}

Answer 3

你需要在小提琴的第2行传递ng-click事件，然后在你的方法中对该对象执行preventDefault和stopPropigation

<tr ng-click="do($event)">

停止在jQuery单击事件中传播底层ng-click

3 个答案: