AngularJS 禁用 ngClick

Question

在 AngularJS 中，有什么方法可以使 ng-click 依赖于布尔值？

例如，我希望以下文本 ("Click") 可点击，但仅当某些范围属性（例如，$rootScope.enableClick) 是 true.

<div ng-click="count = count + 1" ng-init="count=0">Click</div>

最好有没有创建自定义指令的直接方法？

Answer 1

尝试

<div ng-click="count = count + 1" ng-init="count=0" ng-disabled="!enableClick">Click</div>

The ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea).

Answer 2

在ng-click表达式中使用奇怪而奇妙的&& logical operator：

<div ng-click="!stop && (count = count + 1)">Click me</div>

演示

.clickable {
   cursor: pointer; 
}

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
   <div ng-click="!stop && (count = count + 1)" class="clickable" >Click Me</div>
   <div>Count={{count}}</div>
   <input type="checkbox" ng-model="stop">Stop counting<br>
</body>

更新

或者使用 按钮 和 ng-disabled 指令：

<button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>

ng-disabled 指令不适用于 <div> 元素。 disabled 属性不是全局属性。 ng-disabled 指令仅适用于 <input>、<button>、<textarea> 和 <select> 元素，因为这些元素支持 disabled 属性.

演示

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
   <button ng-click="count = count + 1" ng-disabled="stop" >Click Me</button>
   <div>Count={{count}}</div>
   <input type="checkbox" ng-model="stop">Stop counting<br>
</body>

Answer 3

看看这个，我用的方法和@georgeawg用的一样。不同之处在于我将其作为按钮格式并使用 pointer-events: none 这样就不会从 .clickable

触发点击事件

.clickable {
  cursor: pointer;
  display: inline-block;
  width: 200px;
  text-align: center;
  padding: 10px;
  background-color: #eee;
  transition: all 0.3s ease;
  margin: 10px 0;
}
.clickable:hover {
  background-color: #ddd;
}
.test {
  color: grey;
  pointer-events: none;
}

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app ng-init="count=0">
  <div>Count={{count}}</div>
   <div ng-click="count = count + 1" ng-class="{'test': stop}" class="clickable">Click Me</div>
   
   <div>
   <input type="checkbox" ng-model="stop">Stop counting
   </div>
</body>

AngularJS 禁用 ngClick

AngularJS Disable ngClick

angularjs

angularjs-ng-click

演示

更新

演示