Javascript 角度ng重复导致隔离范围

我需要帮助来理解如何使这两个示例以相同的方式工作。首先，以下是我的完整示例：

我使用一个简单的控制器来管理索引。我意识到这不是100%必要的，但我正在将一个更大的问题简化为最基本的帮助部分。控制器如下所示：

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

我使用索引值来维护列表中的哪个项是像选项卡一样被选中的

当元素已经在DOM中时，它们的行为完全符合我的预期。单击每个项目可切换选定的项目。在JSFIDLE中，颜色会更改以显示所选项目

<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重复。我没有在单击时硬编码索引，而是将其设置为中继器的$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>

如何使动态列表像静态列表一样共享一个范围

---

谢谢你的帮助

您可以在父作用域中创建对象，以便在子作用域中使用该值。大概是这样的：

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

---

可以在父作用域中创建对象，以便在子作用域中使用该值。大概是这样的：

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

---

因为为列表中的每个项目创建了一个新范围，所以您对索引的赋值将在每个新范围中创建一个新变量；本质上，列表中的每个项都有自己的索引变量副本

相反，将索引声明为父范围的子字段：

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

然后在HTML中所有您曾经引用索引的地方引用container.index

---

我使用的规则是，对范围变量的所有HTML引用都应该包含“.”-如果没有，那么我可能违反了范围规则。

因为为列表中的每个项目创建了一个新范围，您对索引的赋值将在每个新范围中创建一个新变量；本质上，列表中的每个项都有自己的索引变量副本

相反，将索引声明为父范围的子字段：

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

然后在HTML中所有您曾经引用索引的地方引用container.index

---

我使用的规则是，所有对作用域变量的HTML引用都应该包含“.”-如果没有，那么我可能违反了作用域规则。

是的，您必须在父作用域中像我所说的其他作用域中一样拥有某些内容。我个人喜欢使用函数

因此，在控制器中：

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

然后是ng类：

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

然后点击：

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

---

是的，你必须像我说过的其他人一样，在你父母的范围内。我个人喜欢使用函数

因此，在控制器中：

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

然后是ng类：

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

然后点击：

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

---

您是否尝试过在父范围中创建对象，该对象将出现在所有子范围中？像在TabCtrl中一样，您可以创建一些$scope.sharedObject={index:0}然后修改每个项目中的sharedObject.index您是否尝试在父范围中创建一个对象，该对象将出现在所有子项中？就像在TabCtrl中一样，您可以创建一些$scope.sharedObject={index:0}，然后在每个项目中修改sharedObject.index Derek S和kanoop都有很好的答案，但是NicholasMoise有一个有趣的选项，反映了这里的解释：我已经更新了小提琴以反映所有3种情况。谢谢大家！Derek S和kanoop都有很好的答案，但是NicholasMoise有一个有趣的选项，它反映了这里的解释：我已经更新了小提琴以反映所有3种场景。谢谢大家！