在 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" />

在你的指令中，建立一个双向绑定，如下所示：

scope:{name:"="}

编辑：

我现在意识到（在您发表评论后），虽然这解决了您的问题，但并没有完全回答问题。如下：

当您创建一个指令时，您可以选择创建一个从其父（控制器，通常但不一定）继承的范围或“隔离”范围，分别指定scope: true 或scope: {...}。

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

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

'@' 和 '&' 都产生一个隔离的、未绑定的值，（如果您更改，则仅在隔离范围内更改 - 在您的情况下，原始列表中的对象根本没有变化），唯一的区别是 '@' 读取一个字符串值，而 '&' 读取一个表达式。 这很重要：我认为您的代码不起作用的原因是（仅）因为您传递了 name="{obj.name}" 而不是 name="{{obj.name}}"，因为使用 '@' 会读取字符串值，并且该字符串值可以是 obj 的名称，但您必须将其包含在 {{}} 中！

如果您使用“=”，则表示您希望该变量与指定的外部变量绑定。所以，如果（一发不可收拾！）你想在你的指令中有 2 个模型以相同的值开始，但 on 是绑定的（即更改传播到外部范围），你可以做一些事情像这样：

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

在你的指令中：

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