Question

我想点击切换按钮时禁用我的图像。我认为我使代码正确，但它不能正常工作。当切换设置为true时，我单击它应警告'test'的图像，当切换设置为false时，图像被禁用，因此不会显示警报。

但是当我点击它的警报测试按钮时，我的问题是真是假。怎么了？

var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
    $scope.isEnabled=true; 
    $scope.test = function() {
      alert('test');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="main" ng-controller="DemoCtrl">
    <h1>Image disable</h1>  
    <img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="test()"></img>
    <br/>
    <button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
    {{isEnabled}}
  </body>

Answer 1

即使img元素有ng-click，

ng-disabled也会被触发。

一个简单的解决方案是更改ng-click以检查参数

<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled || test()"></img>

Answer 2

在控制器中执行此操作。您不能在Html中添加任何新内容

var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
    $scope.isEnabled=true; 
    $scope.test = function() {
      if(!$scope.isEnabled) return;
      alert('test');
    }
});

在angularjs中禁用图像

2 个答案: