Javascript 如何使 AngularJS 指令停止传播？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14544741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make an AngularJS directive to stopPropagation?
提问by Robert Christian
I am trying to "stopPropagation" to prevent a Twitter Bootstrap navbar dropdown from closing when an element (link) inside an li is clicked. Using this method seems to be the common solution.
我正在尝试“停止传播”以防止在单击 li 中的元素（链接）时关闭 Twitter Bootstrap 导航栏下拉列表。使用这种方法似乎是常见的解决方案。
In Angular, seems like a directive is the place to do this? So I have:
在 Angular 中，似乎指令是执行此操作的地方？所以我有：
// do not close dropdown on click
directives.directive('stopPropagation', function () {
return {
link:function (elm) {
$(elm).click(function (event) {
event.stopPropagation();
});
}
};
});
... but the method does not belong to element:
...但该方法不属于元素：
TypeError: Object [object Object] has no method 'stopPropagation'
I tie in the directive with
我将指令与
<li ng-repeat="foo in bar">
<div>
{{foo.text}}<a stop-propagation ng-click="doThing($index)">clickme</a>
</div>
</li>
Any suggestions?
有什么建议？
回答by Valentyn Shybanov
I've used this way: Created a directive:
我用过这种方式：创建了一个指令：
.directive('stopEvent', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
if(attr && attr.stopEvent)
element.bind(attr.stopEvent, function (e) {
e.stopPropagation();
});
}
};
});
that could be used this way:
可以这样使用：
<a ng-click='expression' stop-event='click'>
This is more generic way of stopping propagation of any kind of events.
这是停止任何类型事件传播的更通用的方法。
回答by Robert Christian
"Currently some directives (i.e. ng:click) stops event propagation. This prevents interoperability with other frameworks that rely on capturing such events."- link
“目前，一些指令（即 ng:click）会停止事件传播。这阻止了与依赖于捕获此类事件的其他框架的互操作性。” -链接
... and was able to fix without a directive, and simply doing:
...并且能够在没有指令的情况下进行修复，只需执行以下操作：
<a ng-click="doThing($index); $event.stopPropagation();">x</a>
回答by Joseph Silber
stopPropagationhas to be called on an event object, not the element itself. Here's an example:
stopPropagation必须在事件对象上调用，而不是元素本身。下面是一个例子：
compile: function (elm) {
return function (scope, elm, attrs) {
$(elm).click(function (event) {
event.stopPropagation();
});
};
}
回答by Vinny
Here's a simple, abstract directive to stop event propagation. I figure it might be useful to someone. Simply pass in the event you wish to stop.
这是一个简单的抽象指令，用于停止事件传播。我认为它可能对某人有用。只需传递您希望停止的事件。
<div stopProp="click"></div>
app.directive('stopProp', function () {
return function (scope, elm, attrs) {
elm.on(attrs.stopProp, function (event) {
event.stopPropagation();
});
};
});