结合ng-repeat和一个指令否认了被转换的内容访问外部范围?

时间:2013-11-05 02:19:59

标签: angularjs-scope ng-repeat transclusion

方案

在我的应用程序中,我有几次出现的项目列表。我可以通过单击项目上方或下方的加号来插入新项目。我可以通过单击项目上的减号按钮来删除项目。我称之为“加减号列表”或“添加删除列表”。

现有解决方案

目前,我管理添加和删除项目,每个列表使用一个委托点击处理程序,由管理员管理,违反了良好的AngularJS样式。我希望将此逻辑放在自定义指令中。此外,每个项目都有一些脚手架(例如加号和减号按钮),可以隐藏在指令的模板中。

具体问题

当将自定义指令与ng-repeat,transcludion,定义的范围以及Angular自定义指令中相当复杂的系统中的其他东西结合使用时,直观地应该可访问的各种内容似乎不可用。即:整个转换点是要访问指令内的父作用域。

如果指令模板在ng-repeat中包含ng-transclude标记,则被转换的内容似乎不会保留对外部作用域的访问权限(应用程序的作用域,而不是指令的作用域)。然而,如果这是在没有使用指令(裸n重复)的情况下完成的,或者如果指令没有ng-repeat,则访问按预期工作。

简化示例

我已经对该问题进行了演示,显示了所有三种情况:

http://plnkr.co/edit/np6lTmeTrKioo4kb8SP6?p=preview

请注意,当transcluding指令包含ng-repeat时,不会出现绿色的“外部范围数据”。显式传递的数据(字段)按预期绑定,但转换点是我们不必显式传递可能绑定的所有数据。

我正在使用AngularJS 1.2.0-rc.3。

以前的尝试

我花了一整天时间。我没有看到任何完全符合我的情况的人:通常有一些微妙的原因,为什么不需要翻译,或者他们希望访问指令本身内的父范围。我几乎100%肯定这是一个与范围相关的微妙问题,而且我不太了解Angular以便​​巧妙地解决这个问题。由于缺乏更好的指导,我已经(随机)尝试了不同形式的指令范围的许多组合,转换和替换可预测的少数结果。

1 个答案:

答案 0 :(得分:3)

在我写完这个问题之后,一些新的SO问题开始出现在搜索中,所以看起来这个问题实际上非常普遍。这是一个例子:

AngularJS isolated directive with ng-repeat breaks transclusion scope

transcluded范围成为ng-repeat范围的子节点,而不是外部范围,因为ng-repeat创建范围。到目前为止,我的搜索还没有揭示为什么ng-repeat实际上需要一个范围。鉴于这个特定用例的常见程度,我想知道Angular将来是否可以启用这种类型的构造。