Angular - 单击div时，只有在单击div的特定区域时才有效

Question

我正在尝试创建一个包含一堆禁用字段的div。单击div中的任意位置即可启用它们。

我发现单击div中的任何位置会导致触发ng-click，而单击禁用的下拉列表似乎不会触发ng-click。这是一个例子。

http://jsfiddle.net/sJZf7/9/

Javascript：

var app = angular.module('App', []);
function ctrl($scope) {
    $scope.disabled = true;
    $scope.enable = function () {
        $scope.disabled = false;
    }
}

发生了什么事？

Answer 1

您无法在已禁用的元素上触发事件。我会使用CSS：在伪元素之后创建一个禁用的叠加层，可以点击：

<div ng-click="enable()" ng-class="{'disabled': disabled, 'enabled': !disabled}">
    <select ng-disabled="disabled">
        <option>Disabled DropDown</option>
    </select>
    <input type="text" ng-disabled="disabled" size="100" placeholder="Click here to enable the dropdown" />
</div> 

---

.disabled {
    position: relative;
}
.disabled:after {
    position: absolute;
    content:'';
    width: 100%;
    height: 100%;
    opacity: .3;
    background: yellow;
    top: 0;
    left: 0;
}

在这里小提琴：http://jsfiddle.net/sJZf7/11/

Answer 2

你可以找到解决问题的jsfiddle here。

HTML

<h2>
    The dropdown gets enabled if I click anywhere other than the disabled dropdown
</h2>
<div ng-app="App" ng-controller="ctrl" style="border: 10px solid black;">
     <div>
        <select ng-disabled="disabled">
            <option>Disabled DropDown</option>
        </select>
        <input type="text" ng-click="enable();" size="100" placeholder="Click here to enable the dropdown" />
        <select>
            <option>Enabled dropdown</option>
        </select>
    </div>
</div>

的JavaScript

var app = angular.module('App', []);

function ctrl($scope) {
    $scope.disabled = true;
    $scope.enable = function (disabled) {
        $scope.disabled = false;
    }
}

Answer 3

它的工作方式与此类似，因为您指定enable函数的盒子模型是整个div

我改变了你的小提琴，影响最小，以使其发挥作用

http://jsfiddle.net/sJZf7/10/

<select ng-disabled="disabled">
  <option>Disabled DropDown</option>
</select>
<label ng-click="enable()"><input type="text" ng-disabled="disabled" size="100" placeholder="Click here to enable the dropdown" /></label>
<select>
  <option>Enabled dropdown</option>
</select>