Ang-ng-repeat會導致隔離範圍

我可以幫助理解如何使這兩個示例以相同的方式工作。對於初學者來說，這裏是我的完整示例：http://jsfiddle.net/tylerbrinks/DZbfD/Ang-ng-repeat會導致隔離範圍

我正在使用一個簡單的控制器來管理索引。我意識到這不是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>

如何使動態列表共享一個範圍，如靜態列表？

感謝您的幫助！

來源

2013-10-04 Tyler Brinks

你試過在父範圍中創建一個對象，它將出現在所有的孩子中？就像在TabCtrl中一樣，你可以創建一些'$ scope.sharedObject = {index：0}'然後在每個項目中修改'sharedObject.index' – DotDotDot

是的，你必須在你的父範圍內擁有與我所說的其他範圍相同的東西。我個人很喜歡用一個函數

所以在你的控制器：

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

，然後納克級：

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

和NG-點擊：

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

來源

2013-10-04 16:47:41 NicolasMoise

Derek S和kanoop都有很好的答案，但是NicholasMoise有一個有趣的選項來反映在這裏解釋：http://stackoverflow.com/questions/11752977/angularjs-ng-model-scope-in-ng-repeat-is-undefined 我已經更新了小提琴，以反映所有3場景。 http://jsfiddle.net/tylerbrinks/DZbfD/ 謝謝大家！ –

您可以在父作用域中創建一個對象，以便您可以在子作用域中使用該值。事情是這樣的：

Fiddle

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>

來源

2013-10-04 15:48:17

因爲一個新的範圍列表中的每個項目創建，您的任務索引將創建在每個新的領域新的變量;本質上，列表中的每個項目都有自己的索引變量副本。

相反，聲明索引作爲父範圍的子場：

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

，然後參考你的HTML container.index在你用來指指數的所有地方。

我使用的規則是所有的HTML引用範圍變量都應該包含'。' - 如果他們不那麼我可能違反了一個範圍規則。

來源

2013-10-04 15:54:39 kanoop

Ang-ng-repeat會導致隔離範圍

回答

相關問題