如何从 AngularJS 中的自定义指令停止 ng-click? [英] How to stop ng-click from a custom directive in AngularJS?

问题描述

现场演示

考虑以下 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>

当 buttonIsDisabled 为 true 时，如何阻止 ng-click 执行?

How could I stop ng-click from executing when buttonIsDisabled is true?

这里的游乐场

推荐答案

为什么不为您的按钮使用实际按钮.您可以将指令更改为:

Why not use the actual button for your button. You could change your directive to:

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

然后将其设置为看起来像您的 div.请参阅我制作的简短示例.

Then style it to look like your div. See the Short Example I've made.

这篇关于如何从 AngularJS 中的自定义指令停止 ng-click?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！