问题 在AngularJS中,如何使隔离范围继承ng-repeat的范围


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

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

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

scope:{name:"@"}

这不起作用,因为ng-repeat为它迭代的每个元素创建一个独立的范围。所以我最终有两个级别的范围。

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

谢谢。


7270
2017-11-19 08:09


起源

已在这里回答: stackoverflow.com/questions/13294507/... - Tiago Roldão
我们需要更多代码。很难说你在这里想做什么。 - Ben Lesh


答案:


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

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

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

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

scope:{name:"="}

编辑:

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

创建指令时,您可以选择创建一个范围,该范围从其父级(控制器,通常,但不一定)继承,即“隔离”范围,通过指定 scope: true 要么 scope: {...}, 分别。

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

如果创建隔离范围,则可以使用“@”,“=”或“&”指定范围的模型。

'@'和'&'都产生一个孤立的,未绑定的值,(如果你改变,只改变隔离的范围 - 在你的情况下,原始列表中的对象根本没有变化),唯一的区别是'@'读取字符串值,'&'读取表达式。 这是重要的:我认为你的代码不起作用的原因是(仅)因为你通过了 name="{obj.name}" 并不是 name="{{obj.name}}",对于'@',读取字符串值,该字符串值可以是obj的名称,但必须将其包含在{{}}中!

如果使用'=',则表示您希望该变量与指定的外部变量绑定。所以,如果(在一个疯狂,疯狂的愤怒!)你想在你的指令中有2个模型启动相同的值,但是绑定(即更改传播到外部范围),你可以做一些事情喜欢这个:

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

并在你的指令:

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

16
2017-11-19 15:54



好的,谢谢@Tiago,我会试一试。 - yohairosen
它正在工作!谢谢。你能解释一下为什么需要双向绑定而不仅仅是单向绑定(“@”)吗? - yohairosen
编辑我的回答,希望它有所帮助 - Tiago Roldão