设想
在我的应用程序中,我有多次出现的项目列表。我可以通过单击项目上方或下方的加号按钮来插入新项目。我可以通过单击项目上的减号按钮来删除项目。我称之为“加减列表”或“添加删除列表”。
现有解决方案
目前,我使用每个列表的单个委托单击处理程序来管理项目的添加和删除,该处理程序由控制器管理,这违反了良好的 AngularJS 风格。我希望将此逻辑放在自定义指令中。此外,每个项目(例如加号和减号按钮)上都有一些可以隐藏在指令模板中的脚手架。
具体问题
当使用自定义指令与 ng-repeat、transcludion、定义范围以及在相当复杂的系统(即 Angular 自定义指令)中可能的其他内容时,直觉上应该可以访问的各种内容似乎不可用。即:嵌入的全部意义在于可以访问指令内的父范围。
如果指令模板在 ng-repeat 中包含 ng-transclude 标签,则被转入的内容似乎不会保留其对外部范围(应用程序的范围,而不是指令的范围)的访问权限。然而,如果这是在不使用指令(裸 ng-repeat)的情况下完成的,或者如果指令没有 ng-repeat,则访问按预期工作。
简化示例
我对这个问题做了一个演示,展示了所有三种情况:
http://plnkr.co/edit/np6lTmeTrKioo4kb8SP6?p=preview
请注意,当 transcluding 指令包含 ng-repeat 时,不会出现绿色的“外部范围数据”。显式传递的数据(字段)按预期绑定,但嵌入的要点是我们不必显式传递所有可能绑定的数据。
我正在使用 AngularJS 1.2.0-rc.3。
以前的尝试
我花了一整天的时间在这上面。我没有看到任何人与我的情况完全一样:通常有一些微妙的原因为什么不需要嵌入,或者他们希望访问指令本身内的父范围。我几乎 100% 确定这是一个与范围相关的微妙问题,而且我对 Angular 的了解还不够好,无法巧妙地解决这个问题。由于缺乏更好的方向,我已经(随机地)尝试了许多不同形式的指令范围、嵌入和替换的组合,但结果可想而知。