角ng-repeat導致隔離范圍

Question

我可以使用幫助來理解如何使這兩個示例以相同的方式工作。 首先，這是我的完整示例： http : //jsfiddle.net/tylerbrinks/DZbfD/

我正在使用一個簡單的控制器來管理索引。 我意識到這不是100％必要的，但我正在將更大的問題簡化為最基本的幫助部分。 控制器如下所示：

function TabCtrl($scope){
    $scope.index = 0;
}

我正在使用索引值來維護列表中選中的項目（如標簽）。

當元素已經在DOM中時，它們的行為將完全符合我的預期。 單擊每個項目可切換選擇哪個項目。 在JsFiddle中，顏色會更改以顯示所選項目。

<div ng-controller="TabCtrl">
    <div ng-class="{selected: index == 0}" ng-click="index = 0">Click Me. Position is 0, scope.index is {{index}}</div>
    <div ng-class="{selected: index == 1}" ng-click="index = 1">Click Me. Position is 1, scope.index is {{index}}</div>
    <div ng-class="{selected: index == 2}" ng-click="index = 2">Click Me. Position is 2, scope.index is {{index}}</div>
</div>

太好了-表現如我所願。 我的問題是我有一個動態列表，並且正在使用ng-repeat進行構建。 當我這樣做時， ng-repeat似乎為列表中的每個項目賦予了新的作用域。 這意味着我無法在它們之間切換，因為它們不共享相同的索引屬性。 而是，每個列表項都有自己的范圍，並且每個范圍都有唯一的索引值。

這是同一件事，但是使用ng-repeat。 我將其設置為轉發器的$ index屬性，而不是對點擊時的索引進行硬編碼。

<div ng-controller="TabCtrl">
    <div  ng-repeat="item in [1,2,3]" ng-class="{selected: index == $index}" ng-click="index = $index">Click Me.  Position is: {{$index}}, scope.index is {{index}}</div> 
</div>

如何使動態列表與靜態列表共享單個作用域？

謝謝您的幫助！

Answer 1

您可以在父范圍中創建一個對象，以便可以在子范圍中使用該值。 像這樣：

小提琴

function TabCtrl($scope){
    $scope.myVariables = { index : 0 };
}

<div ng-controller="TabCtrl">
    <div ng-repeat="item in [1,2,3]" ng-class="{selected: myVariables.index == $index}" ng-click="myVariables.index = $index">Click Me.  Position is: {{$index}}, myVariables.index is {{myVariables.index}}</div> 
</div>

Answer 2

因為為列表中的每個項目創建了一個新的作用域，所以您對索引的賦值將在每個新的作用域中創建一個新變量。 本質上，列表中的每個項目都有其自己的index變量副本。

而是將索引聲明為父范圍的子字段：

function TabCtrl($scope){
    $scope.container = {
      index: 0
    }
}

然后在您以前引用索引的所有位置引用HTML中的container.index。

我使用以下規則：所有對范圍變量的HTML引用都應包含“。” -如果他們不這樣做，那么我可能已經違反了范圍界定規則。

Answer 3

是的，您必須像我已經說過的那樣在您的父范圍中擁有一些東西。 我個人喜歡使用功能

所以在您的控制器中：

  $scope.activate= function(index){
      $scope.index=index;
  };

然后ng-class：

ng-class="{ active:index=={{$index}}}"

並單擊ng：

ng-click="activate({{$index}})"