Question

我正在研究一些AngularJS教程。与此同时，我让我的小玩具进一步实验。我发现一种情况，当一个表达式在ng-repeat之外工作但不会在内部工作时我想知道为什么？

模板：

<div ng-controller="TodoController">

  <ul ng-init="detail = 0">
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">
      <span>{{todo.text}}</span>

      <!-- This does not make the detaildiv appear -->
      <input class="btn" type="submit" value="dive1" ng-click="detail = 1">
    </li>
  </ul>

  <!-- This however will make the detaildiv appear -->
  <input type="submit" value="divein" ng-click="detail = 1">
  <p>Detail: {{detail}}</p>

  <div id="detaildiv" ng-show="detail === 1">
    <span>Some content</span>
    <input type="submit" value="diveout" ng-click="detail = 0">
  </div>
</div>

什么是关于ng-repeat阻止这种工作，或者我是否在错误的轨道上？

Answer 1

将我的评论作为答案。

基本上ng-repeat会创建一个子范围，因此ng-repeat内部和外部的细节不相同。为了解决这个问题，你必须使用$ parent。

<ul ng-init="detail = 0">
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">
      <span>{{todo.text}}</span>

      <!-- This does not make the detaildiv appear -->
      <input class="btn" type="submit" value="dive1" ng-click="detail = 1">
    </li>
  </ul>

但解决此问题的最佳方法是never use ng-model without dot。

甚至更好地开始使用controller as语法。

以上两个选项都可以避免此类问题。

为什么这个表达式在ng-repeat中不起作用？

1 个答案: