javascript - 在 AngularJS 中，如何使一个独立的范围继承自 ng-repeat 的范围

Question

我正在尝试创建一个在 ng-repeat 循环中接收参数的自定义组件。因此，例如，假设我有一个名为“mycomp”的组件，它在 ng-repeat 中接收自定义参数“name”:

<mycomp name="{obj.name}" ng-repeat="obj in list" />

在我的指令中，隔离范围定义如下:

scope:{name:"@"}

那是行不通的，因为 ng-repeat 为它迭代的每个元素创建了一个独立的范围。所以我最终得到了两个级别的范围。

我该如何解决这个问题？我做错了什么吗？

谢谢。

Answer 1

正如我在对您的原始问题的评论中所述，这已经得到解答。无论如何，总结如下:

在您的模板中，声明您想要继承的模型，不要使用 {{}}(因为使用括号会导致传递值，而不是对模型本身的引用):

<mycomp name="obj.name" ng-repeat="obj in list" />

然后在您的指令中，建立一个双向绑定(bind)，如下所示:

scope:{name:"="}

编辑:

我现在意识到(在您发表评论之后)虽然这解决了您的问题，但并没有完全回答问题。开始了:

当您创建一个指令时，您可以选择创建一个从其父级( Controller ，通常，但不一定)继承的范围或“隔离”范围，方法是指定 scope: true 或范围:{...}，分别。

因此，通过创建一个独立的范围，所有父级的模型都可用(您可以访问 scope.obj - 通过 ng-repeat 创建 - 但也可以访问 scope.list)。这很方便，但当然也很危险(并且不会真正创建可重用代码)。

如果您创建一个独立的作用域，您可以使用“@”、“=”或“&”指定作用域的模型。

'@' 和 '&' 都产生一个孤立的、未绑定(bind)的值，(即，如果您更改，仅在孤立的范围内更改 - 在您的情况下，原始列表中的对象根本不会发生任何变化)，唯一的区别是“@”读取字符串值，而“&”读取表达式。这很重要:我认为您的代码不起作用的原因(仅)是因为您通过了 name="{obj.name}" 而不是 name="{ {obj.name}}"，对于带'@'的字符串值被读取，并且该字符串值可以是obj的名称，但您必须将其包含在{{}}中!

如果您使用“=”，则表示您希望该变量与指定的外部变量绑定(bind)。所以，如果(在一阵疯狂的愤怒中!)你想在你的指令中有 2 个模型，它们以相同的值开始，但是 on 是绑定(bind)的(即变化被传播到外部范围)，你可以做一些事情像这样:

<mycomp binded-name="obj.name" unbinded-name="{{obj.name}}" ng-repeat="obj in list" />

在你的指令中:

scope:{
  bindedName: "=",
  unbindedName: "@"
}