如何制作一个AngularJS指令来停止传播?

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引导的navbar下拉停止。使用此方法似乎是常见的解决方案。

In Angular, seems like a directive is the place to do this? So I have:

在角度上，似乎是一个指示是地方做这个?所以我有:

// 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?

有什么建议吗?

4 个解决方案

#1

150

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.

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

#2

119

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

#3

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

#4

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

#1

150