angularjs-scope - 结合 ng-repeat 和指令拒绝嵌入的内容访问外部范围?

标签 angularjs-scope ng-repeat transclusion

场景

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

现有解决方案

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

具体问题

当将自定义指令与 ng-repeat、transcludion、定义的范围以及相当复杂的 Angular 自定义指令系统中的其他可能的东西结合使用时,直觉上应该可以访问的各种东西似乎不可用。即:包含的全部要点是可以访问指令内的父范围。

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

简化示例

我已经对这个问题做了一个演示,展示了所有三种情况:

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

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

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

以前的尝试

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

最佳答案

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

AngularJS isolated directive with ng-repeat breaks transclusion scope

嵌入的范围成为 ng-repeat 范围的子级,而不是外部范围,因为 ng-repeat 创建范围。到目前为止,我的搜索无法揭示为什么 ng-repeat 实际上需要一个范围。考虑到这种特定用例的普遍性,我想知道 Angular 是否会在未来启用这种类型的构造。

关于angularjs-scope - 结合 ng-repeat 和指令拒绝嵌入的内容访问外部范围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19780895/

相关文章:

javascript - 当新项目添加到模型时,ng-repeat 更改所有项目的排序顺序

AngularJS - ng-水平重复 x 次,然后换行

javascript - 使用 angular.element 通过 $ID 获取作用域对象

javascript - 60 秒后更新 Angular 模型

angularjs - ng-repeat 动画不起作用

angular - Dart Angular 2 Transclusion 使用带有多个选择器的 ng-content

node.js - 在 $HTTP.post 之后更新 $scope

angularjs - ng-repeat 只显示最后一个值

javascript - Ng-repeat 整数值

css - Angular2 包含 - 将 css 应用于子元素类