NG-模型的角度範圍來篩選不同的作用域

Question

讀docs tutorial的模型，模板下。下面是從應用程序所採取的代碼/ 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

有一個$範圍樹，從$ rootScope開始。在你的HTML中，只有1個作用域（忽略ngRepeat，每次迭代都會創建自己的子作用域）。因此，當用戶在輸入框中輸入一個值時，它將被綁定爲查詢與兄弟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變量的寫入會寫入它的直接範圍 - 有時會像上面解釋的那樣破壞表觀綁定。