如何将AngularJS指令设置为stopPropagation？

Question

我试图"停止传播"以防止在点击li中的元素(链接)时关闭Twitter Bootstrap导航栏下拉列表.使用这种方法似乎是常见的解决方案.

在Angular中,似乎是一个指令就是这样做的地方？所以我有:

// do not close dropdown on click
directives.directive('stopPropagation', function () {
    return {
        link:function (elm) {            
            $(elm).click(function (event) {                
                event.stopPropagation();
            });
        }
    };
});

...但该方法不属于元素:

TypeError: Object [object Object] has no method 'stopPropagation'

我指的是指令

<li ng-repeat="foo in bar">
  <div>
    {{foo.text}}<a stop-propagation ng-click="doThing($index)">clickme</a>
  </div>
</li>

有什么建议？

Answer 1

我用这种方式:创建了一个指令:

    .directive('stopEvent', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if(attr && attr.stopEvent)
                    element.bind(attr.stopEvent, function (e) {
                        e.stopPropagation();
                    });
            }
        };
     });

可以这样使用:

<a ng-click='expression' stop-event='click'>

这是阻止任何类型事件传播的更通用方法.

Answer 2

"目前一些指令(即ng:click)会阻止事件传播.这会阻止与依赖于捕获此类事件的其他框架的互操作性." - 链接

......并且能够在没有指令的情况下修复,并且只是做:

<a ng-click="doThing($index); $event.stopPropagation();">x</a>

Answer 3

stopPropagation必须在事件对象上调用,而不是元素本身.这是一个例子:

compile: function (elm) {
    return function (scope, elm, attrs) {
        $(elm).click(function (event) {
            event.stopPropagation();
        });
    };
}