ng-model的角度范围，以过滤不同范围的模型

Question

阅读模板下的文档教程。下面的代码取自 app/index.html

角度是否允许同级范围的交叉可见性？

范围 1 中的名为查询的数据如何可用于范围 2 中的筛选器，该筛选器是同级而不是父范围？谢谢。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2"> //-----------scope 1 -----------------
      <!--Sidebar content-->
      Search: <input ng-model="query">
    </div>
    <div class="col-md-10">  //-----------scope 2 -----------------
      <!--Body content-->
      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

有一棵$scope树，从$rootScope开始。在您的 HTML 中，只有 1 个作用域在起作用（忽略 ngRepeat，它会在每次迭代时创建自己的子作用域）。 因此，当用户在输入框中输入值时，它将被绑定到与同级div 位于同一范围内的查询。 因此，为什么两个查询都绑定到同一个范围变量，即使它们在同级div 中。

中断绑定的一种方法是为输入控件引入子作用域。例如，ngController 将创建一个从父作用域继承的子作用域。按下某个键后，它会在子作用域中创建query的副本。这会破坏双向绑定，因为现在查询变量的两个副本存在于不同的作用域中。

<div class="col-md-2" ng-controller="anyCtrl"> //-----------scope 1 -----------------
  <!--Sidebar content-->
  Search: <input ng-model="query">
</div>

您应该可视化$scope树，并了解哪些指令将创建子作用域。 还要记住，$scope变量查找（读取）是通过原型$scope继承来解决的（这意味着$scope变量的定义可能存在于$scope树的更高位置）。但是$scope变量写入将写入其直接范围 - 有时会破坏我上面解释的明显绑定。