如何使 AngularJS 指令停止传播？

IT技术 javascript jquery angularjs stoppropagation
2021-01-22 23:06:34

我正在尝试“停止传播”以防止在单击 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个回答

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

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

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

IE7 中 .prefentDefault() 的相同解决方案，以防止页面重新加载。很棒的解决方案！
2021-03-18 23:06:34
哦，上帝，我喜欢指令
2021-03-18 23:06:34
顺便说一句，你能详细说明一下restrict关键字吗？没有找到一个很好的资源来说明这究竟意味着什么。
2021-03-20 23:06:34
当然！docs.angularjs.org/guide/directive "指令定义对象"：restrict - EACM 子集的字符串，它将指令限制为特定的指令声明样式。如果仅在属性上允许省略指令。
2021-03-24 23:06:34
这是一个有趣的方法......我喜欢它。谢谢！
2021-04-01 23:06:34

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

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

<a ng-click="doThing($index); $event.stopPropagation();">x</a>
如果我们单击另一个按钮链接，则此策略不起作用。当前链接不会关闭
2021-03-16 23:06:34
这是完美的。我有一个带有表单的下拉列表。我在表单周围的 div 添加了 ng-click="$event.stopPropagation()" 并修复了单击表单输入时下拉菜单消失的问题。谢谢！
2021-03-25 23:06:34
确实，这比必须创建指令更简单。对我来说很好用。谢谢
2021-03-29 23:06:34
简单的解决方案。完美地工作。我更喜欢这个而不是创建一个指令。
2021-04-01 23:06:34
简单的一次性使用场景。我建议任何需要在整个视图中的多个位置使用此代码的人使用指令 - 首先，扩展功能、处理更多事件更容易，尤其是尽量将逻辑排除在标记之外可能的。干杯!
2021-04-09 23:06:34

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

compile: function (elm) {
    return function (scope, elm, attrs) {
        $(elm).click(function (event) {
            event.stopPropagation();
        });
    };
}
所以发现这是解决办法：<a ng-click="doThing($index); $event.stopPropagation();">x</a>
2021-03-31 23:06:34
谢谢。我编辑了这个问题，以便指令在事件而不是元素上调用 stopPropagation。没用。发现这个：“目前一些指令（即 ng:click）会停止事件传播。这阻止了与依赖捕获此类事件的其他框架的互操作性。” - github.com/angular/angular.js/issues/259
2021-04-08 23:06:34

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

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


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

不需要stop-prop在元素中吗？
2021-03-31 23:06:34
其它你可能感兴趣的问题
上一篇如何在 JavaScript 中从十六进制转换为 ASCII？ 下一篇在 Bootstrap 中打开模态放大图像