如何停止AngularJS中自定义指令的ng-click？

Question

现场演示

请考虑以下myButton指令:

angular.module("Demo", []).directive("myButton", function() {
  return {
    restrict : "E",
    replace: true,
    scope: {
      disabled: "="
    },
    transclude: true,
    template: "<div class='my-button' ng-class='{ \"my-button-disabled\": disabled }' ng-transclude></div>",
  };
});

可以像这样使用:

<my-button disabled="buttonIsDisabled" 
           ng-click="showSomething = !showSomething">
  Toggle Something
</my-button>

我怎么能阻止ng-click从执行的时候buttonIsDisabled是true？

这里的游乐场

Answer 1

您可以使用capture(addEventListener可选的第三个参数)并停止事件的传播(使用stopPropagation).

"捕获"允许您在事件到达"泡沫"阶段之前捕获事件(当触发"正常"事件监听器时)和"stopPropagation"将...停止事件的传播(因此它永远不会到达冒泡阶段).

element[0].addEventListener('click', function (evt) {
    if (scope.disabled) {
        console.log('Stopped ng-click here');
        evt.preventDefault();
        evt.stopPropagation();
    }
}, true);

另见这个简短的演示.