2

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

<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>
    <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/

4

2 回答 2

3

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

这不仅可能发生在ng-if任何创建子作用域的指令上，例如ng-repeat等ng-switch。

阅读这个解释清楚的答案。

尝试：

<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>

于 2015-01-02T20:54:26.053 回答
-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>
于 2015-01-02T20:53:08.707 回答