将父范围值传递给Angular中的ng-repeat循环答案

【问题标题】：Pass parent scope value into ng-repeat loop in Angular将父范围值传递给Angular中的ng-repeat循环
【发布时间】：2015-12-15 22:04:05
【问题描述】：

这应该是一个非常简单的问题，但我发现的所有解决方法都很复杂。我在模板中使用 ng-repeat 循环遍历对象数组，如下所示：

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ campaign.name }} ...
</div>

由于 ng-repeat 创建了一个新范围，控制器中的“活动”对象似乎无法访问。有什么方法（除了将活动对象添加到我数组中的每个项目之外）可以获得该值吗？

提前致谢。

【问题讨论】：

它应该可以工作。 {{campaign.name }} 是否在 ng-repeat 之外工作？
ng-repeat 创建的子作用域原型继承自父作用域，因此在父作用域上定义的所有属性都应该在 ng-repeat 子作用域中可见。您是否在 div 上或其中定义了另一个指令？
好的。我知道了。感谢你们两位的cmets。

标签： javascript angularjs angular-template

【解决方案1】：

您可以使用 $parent 访问父范围

<div class="row-fluid" ng-repeat="message in messages.current|filter:'draft'"> 
    {{ message.subject }} ... {{ $parent.campaign.name }} ...
</div>

【讨论】：

虽然这是真的，但如果你这样做，你做错了一些事情。由于子作用域原型继承自父作用域，因此您不需要这样做。当代码增长时会很乱，你会发现自己在写$parent.$parent.$parent.$parent.help()
虽然过度使用 $parent 是你应该尽量避免的事情，但在某些情况下它会很有用。访问同样在 ng-repeat 中的父级的索引至少是我能想到的。
{{ $parent.$index }} {{ $index }}
当然实践胜过理论=)。我相信可以有更多相关的例子，但是当我看到反模式时，我觉得有责任警告人们，如果他们要使用它，他们应该知道还会发生什么。
Understanding-Scopes 谈论使用 $parent 与原型继承。
@MathewBerg，在这种情况下，您可以在 ng-repeat 中使用 ng-init="parentIndex = $index" 在子范围内访问它，而无需使用 $parent

【解决方案2】：

这是一种不使用$parent 的有效方式。它向上搜索嵌套范围以找到您正在使用的对象，无论它必须经过多少个范围。

在包含列表的范围内，可以定义一个以列表为属性的对象，如下所示：

$scope.obj = {};
$scope.obj.items = ['item1','item2','item3'];

然后让ng-repeat 看起来像这样：

<div ng-repeat="item in obj.items | filter:'item3' track by $index">
    {{obj.items[ obj.items.indexOf(item) ]}}
</div>

（你需要使用obj.items[ obj.items.indexOf(item) ]而不是obj.items[ $index ]，因为$index是过滤后数组的索引，而不是原来的）

之所以可行，是因为虽然obj 在当前作用域中不存在，但当您尝试访问其属性时，Angular 会查看当前作用域之上而不是给您一个错误（如果您刚刚尝试过@987654331 @ 它将是未定义的，Angular 会很乐意给你任何东西而不是查看更高的范围）。这是一个关于嵌套范围的有用链接：http://www.angularjshub.com/examples/basics/nestedcontrollers/

在我的情况下，我需要track by $index，因为我有一个输入，ng-model 绑定到数组中的一个项目，并且每当模型更新时，输入就会变得模糊，因为我认为 HTML 正在重新渲染.使用track by $index 的结果是数组中具有相同值的项目将被重复。如果您修改第一个以外的其中之一，就会发生奇怪的事情。也许您可以过滤唯一性来避免这种情况。

我对 AngularJS 比较陌生，所以如果我遗漏了什么大的东西，请发表评论。但这行得通，所以我至少在使用它。

【讨论】：

“只要你有 ng-model，那里一定有一个点” - Misko Hevery 3:34

【解决方案3】：

另一种方法可能是将父范围作为范围变量传递给指令，即

<my-directive 
    md-parent-scope="this" 
    ng-repeat="item in items"></my-directive>

这有点乱，但你可以更好地控制父母实际上是什么，并且可以传递任何东西。

【讨论】：