Question

我想创建一个绑定到按钮上的'click'事件的指令，并在遇到条件时阻止ng-click触发。

我知道我可以在ng-click指令中处理这个问题，例如

ng-click="vm.form.$valid && vm.savePost(vm.post)"

但我的要求比那要复杂一点。

我确实创建了一个指令，而不是绑定到按钮的点击事件并调用e.preventDefault()，但这并没有阻止ng-click被触发。

Answer 1

可能首先触发ngClick指令。在这种情况下，您可以尝试使用优先级设置：

(function (module) {
    var myDirective = function () {
        return {
            restrict: 'A',
            scope: true,
            priority: 1000,
            ........
        };
    };
    module.directive("myDirective", myDirective);
}(angular.module("module")));

来自compile的官方文档：

优先

当在单个DOM元素上定义了多个指令时，   有时需要指定指令的顺序   适用。优先级用于在指令之前对指令进行排序   编译函数被调用。

Answer 2

我知道这个问题已经很老了，但是下面的指令绑定了一个click事件处理程序，该事件处理程序可防止对绑定到同一html元素上ng-click的函数的调用。

键是：

priority: -1：由于ngClick具有priority: 0，因此我们的指令的链接（后链接）功能将在ngClick链接功能之后执行，如angular docs中所述：

具有更高数字优先级的指令将首先被编译。链接前功能也按优先级顺序运行，但链接后函数以相反的顺序运行。指令的顺序与相同的优先级未定义。

e.stopImmediatePropagation();如JQuery docs所述：

除了保留元素上的任何其他处理程序之外，在执行时，此方法还通过隐式阻止冒泡调用event.stopPropagation（）。

指令代码：

.directive('noClick', [function(){
        return {
            priority: -1,
            link: function(scope, iElem, iAttr){
                iElem.on('click', noClick);

                function noClick(e) {
                    e.stopImmediatePropagation();
                    e.preventDefault();
                }
            }
        };
    }])

HTML代码

<div no-click ng-click="myFunct()">

贷记this answer

Answer 3

防止默认用于阻止正常操作。例如没有去目标，或者按钮没有提交等等。

ng-click和onclick不是默认操作，您无法使用preventDefault阻止它。

你必须在ng-click中使用函数，才能在行动前制定条件。

如何防止点击点击

3 个答案: