关于javascript：如何将AngularJS指令设置为stopPropagation？


How can I make an AngularJS directive to stopPropagation?

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

在角度上，似乎有一个指示是做这件事的地方？所以我有：

1
2
3
4
5
6
7
8
9
10
// do not close dropdown on click
directives.directive('stopPropagation', function () {
    return {
        link:function (elm) {            
            $(elm).click(function (event) {                
                event.stopPropagation();
            });
        }
    };
});

…但该方法不属于元素：

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

我把指令和

1
2
3
4
5
6
<li ng-repeat="foo in bar">
 
    {{foo.text}}clickme
 

</li>

有什么建议吗？

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
    .directive('stopEvent', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if(attr && attr.stopEvent)
                    element.bind(attr.stopEvent, function (e) {
                        e.stopPropagation();
                    });
            }
        };
     });

可以这样使用：

1
 

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

相关讨论

"目前，一些指令(例如，ng:click)停止事件传播。这就阻止了与依赖于捕获此类事件的其他框架的互操作性。"—link

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

1
x
相关讨论

必须对事件对象而不是元素本身调用stopPropagation。下面是一个例子：

1
2
3
4
5
6
7
compile: function (elm) {
    return function (scope, elm, attrs) {
        $(elm).click(function (event) {
            event.stopPropagation();
        });
    };
}
相关讨论

下面是一个简单、抽象的指令来停止事件传播。我想这可能对某人有用。如果你想停下来，就通过。

1
 

1
2
3
4
5
6
7
app.directive('stopProp', function () {
  return function (scope, elm, attrs) {
    elm.on(attrs.stopProp, function (event) {
        event.stopPropagation();
    });
  };
});

相关讨论