我怎样才能使AngularJS指令停止传播？

我试图“停止传播”，以防止点击一个li中的元素（链接）时closuresTwitter Bootstrap navbar下拉菜单。 使用这种方法似乎是常见的解决scheme 。

在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> 

有什么build议么？

Answer 1

我用这种方法：创build一个指令：

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

Answer 4

下面是一个简单的抽象指令来停止事件传播。 我认为这可能对某人有用。 只要通过你想停止的事件。

 <div stopProp="click"></div> 

 app.directive('stopProp', function () { return function (scope, elm, attrs) { elm.on(attrs.stopProp, function (event) { event.stopPropagation(); }); }; });