如何阻止在AngularJS自定义指令NG-点击？ [英] 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>",
  };
});

可以使用的是这样的：

which can be used like this:

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

我怎么能停止 NG-点击从执行时 buttonIsDisabled 是真实？

操场这里

推荐答案

为什么不使用实际的按钮，你的按钮。你可以你的指令更改为：

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>"
  };
});

然后，样式它看起来像你的股利。请参阅简短的例子我做了。

这篇关于如何阻止在AngularJS自定义指令NG-点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！