Angular ngIf 中的 ngDisabled

Question

我遇到了障碍。我有一段简单的代码：

<div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
        <input type="text" ng-disabled="disable" />       
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

这很好用，但我希望将文本和第二个复选框拆分为多个 div，两者仍然依赖于第一个复选框，例如：

<div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
        <input type="text" ng-disabled="disable" />
    </div>
    <div ng-if="!element">        
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

当我这样做时，模型没有得到正确应用，我无法使用第二个复选框禁用文本框。我误解了范围，还是这是一个错误？

我知道在这个例子中，我可以将两者包装在一个外部 div 中，但我的问题是我的结构是一个 table 结构（是的，它是表格数据），我不想要隐藏整行，同时尽可能保持标记的语义。

<table>
    <tr>
        <td></td> //this does not get hidden
        <td></td> //this does not get hidden
        <td></td> //this does not get hidden
        <td></td> //THIS GETS HIDDEN
        <td></td> //THIS GETS HIDDEN
    </tr>
</table>

如果你想玩，我设置了一个基本的小提琴：http://jsfiddle.net/qkmv6wfh/

Answer 1

尝试使用 ng-show/hide 代替：

  <div ng-app>
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-hide="element">
        <input type="text" ng-disabled="disable" />
    </div>
    <div ng-hide="element">        
        <input type="checkbox" ng-model="disable" />Disable
    </div>
</div>

Answer 2

这不是错误。您看到的行为是由于 ng-if 创建的子作用域。在您的情况下，在属性 disable 范围内设置的值仅在第二个 ng-if="!element" 创建的子范围内可用，而另一个块内的 disable 在其自己的子范围内范围。您可以通过将其设置在对象引用上来解决它，其中对象在任何这些子作用域（例如 ng-init="action ={}"）之前被初始化，在这种情况下，两个子作用域都引用相同的对象引用 action（因为它们得到原型继承）和对属性 action.disabled 的修改在这两个地方都得到了反映。

这不仅适用于 ng-if 任何创建子作用域的指令，如 ng-repeat、ng-switch 等

Read this well explained answer.

尝试：

<div ng-app ng-init="action ={}">
  <input type="checkbox" ng-model="element" />Hide Element
  <div ng-if="!element">
    <input type="text" ng-disabled="action.disable" />
  </div>
  <div ng-if="!element">
    <input type="checkbox" ng-model="action.disable" />Disable
  </div>
</div>

错误代码警告：我仅将 ng-init 用于此演示目的，您不应使用 ng-init 进行初始化。始终使用控制器来初始化示波器上的值。

演示

angular.module('app', []).controller('Controller1', function() {

}).controller('dummy', function() {}).controller('Controller2', function($scope) {
  $scope.action = {};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <p>With ng-init</p>
  <div ng-init="action ={}" ng-controller="dummy">
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
      <input type="text" ng-disabled="action.disable" />
    </div>
    <div ng-if="!element">
      <input type="checkbox" ng-model="action.disable" />Disable
    </div>
  </div>

  <p>With Controller As</p>
  <div ng-controller="Controller1 as ctrl">
    <input type="checkbox" ng-model="ctrl.element" />Hide Element
    <div ng-if="!ctrl.element">
      <input type="text" ng-disabled="ctrl.disable" />
    </div>
    <div ng-if="!ctrl.element">
      <input type="checkbox" ng-model="ctrl.disable" />Disable
    </div>
  </div>

  <p>With Controller and dot in the binding</p>
  <div ng-controller="Controller2">
    <input type="checkbox" ng-model="element" />Hide Element
    <div ng-if="!element">
      <input type="text" ng-disabled="action.disable" />
    </div>
    <div ng-if="!element">
      <input type="checkbox" ng-model="action.disable" />Disable
    </div>
  </div>
</div>

Angular ngIf 中的 ngDisabled

Angular ngDisabled inside ngIf

javascript

angularjs

angularjs-scope

angularjs-ng-model