Question

我已经编写了一个指令，用于捕获单击按钮时是否按下“shift”，如果是，则调用其他函数。问题是，原始的ng-click操作也正在执行。我虽然阻止默认或停止传播会阻止这种情况，但似乎并非如此。

HTML

  <body ng-app="app">
      <div ng-controller="ctrl">
          <button class="btn btn-default" ng-click="click1($event)" shift-ng-click="click2($event)">Click</button>
      </div>
  </body>

JS

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
    $scope.click1 = function(event) {
        console.log("Click 1");
    }

    $scope.click2 = function(event) {
        console.log("Click 2");
    }
});

app.directive('shiftNgClick', function() {
    return {
        restrict: "A",
        link: function(scope, el, attrs) {
            el.bind('click', function(event) {
                if (event.shiftKey) {

                    event.preventDefault();
                    event.stopPropagation();
                    scope.$apply(attrs.shiftNgClick);
                }
            })
        }
    };
});

因此，当调用scope。$ apply（）调用的函数时，原始的ng-click（）函数也会被调用。导致click1（）和click2（）被调用。

有没有办法阻止这种情况发生，或者最好完全忽略ng-click，并将其全部放入指令中？

Plucker here

谢谢，Dan

Answer 1

event.stopPropagation()只会阻止父处理程序捕获事件。您正在寻找event.stopImmediatePropagation()，这也会阻止附加到同一元素的其他处理程序运行。

Angular - 在指令中捕获并单击并取消它

1 个答案: