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

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

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>

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-click：

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

角度ng重复导致孤立的范围

3 个答案: