11

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

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

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

scope:{name:"@"}

这是行不通的，因为 ng-repeat 为它迭代的每个元素创建了一个隔离的范围。所以我最终有两个级别的范围。

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

谢谢。

4

1 回答 1

16

正如我在对您的原始问题的评论中所说，这已经得到了回答。总之，总结如下：

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

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

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

scope:{name:"="}

编辑：

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

当您创建一个指令时，您可以选择创建一个从其父级（控制器，通常但不一定）继承的范围或一个“隔离”范围，分别指定scope: trueor 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: "@"
}
于 2012-11-19T15:54:42.797 回答