76

我正在尝试“stopPropagation”以防止在单击 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>

有什么建议么？

4

4 回答 4

156

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

    .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'>

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

于 2013-01-27T12:18:35.087 回答
123

“目前，一些指令（即 ng:click）会停止事件传播。这会阻止与依赖于捕获此类事件的其他框架的互操作性。” -链接

...并且能够在没有指令的情况下进行修复，并且只需执行以下操作：

<a ng-click="doThing($index); $event.stopPropagation();">x</a>
于 2013-01-27T06:25:07.710 回答
9

stopPropagation必须在事件对象上调用，而不是元素本身。这是一个例子：

compile: function (elm) {
    return function (scope, elm, attrs) {
        $(elm).click(function (event) {
            event.stopPropagation();
        });
    };
}
于 2013-01-27T05:36:35.390 回答
1

这是一个简单的抽象指令，用于停止事件传播。我认为它可能对某人有用。只需传递您希望停止的事件。

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


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

于 2015-11-06T16:54:41.823 回答