将数据传递给ng-transclude

时间:2016-06-28 17:55:43

标签: angularjs

我有一个指令(它接受一个列表并将其转换为网格。网格的每个“单元格”都有一个被转换内容的克隆。目前我正在尝试向每个单元格传递一些偏向于当前项目的数据列表

我的指令模板是:

<div class="row" ng-repeat="row in grid">
    <div ng-repeat="item in row">
      <div ng-transclude></div>
    </div>
  </div>
</div>

我目前的尝试是:https://jsfiddle.net/46ybLt0g/3/

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:2)

您需要进一步了解范围在Angular中的工作原理。看看这里:https://github.com/angular/angular.js/wiki/Understanding-Scopes

请注意,在第二句中,它指定具有隔离范围和/或转换的指令不是原型继承的。这并不会直接影响您的代码设置,但它应该有助于解释为什么这不起作用,因为在您的设置中,您的指令与您的控制器的范围完全不同。

你的指令中有一个ng-repeat,它嵌套在另一个ng-repeat下面,并带有一个名为item的重复对象。在您的父控制器中,您尝试引用item.name,这在该上下文中不存在。它实际上只存在于内部ng-repeat指令的范围内。

看看这个小提琴:https://jsfiddle.net/hsz7o1k9/

打开浏览器的控制台,花点时间查看打印的内容。您不会在任何范围内看到item属性。最重要的是,从指令中查看范围。有一个$ parent属性。这是你的控制器GridCtrl的范围。您可以通过查看每个范围的$ id来验证这一点,以查看哪个是。

你的ng-repeat的范围看起来非常相似,但它的父级是其他ng-repeat的范围,或者你的指令gridList的范围。因为它们是这样嵌套的,所以实际上您无法从控制器的范围访问ng-repeat范围的item属性。

通过控制器作用域上的$$ ChildScope属性可以找到这些子作用域的路径,但是双元($$)是表示私有属性的angular的约定。实际上,这对我们意味着我们不能依赖它在更高版本的角度中存在,所以不应该使用它。

因此,总是存在从子范围到父级的路径,但不会下降。从子范围到父母可以快速变得丑陋(例如scope.$parent.$parent.$parent.$parent.obj.prop),这不是我认为编写代码的好方法。

不是来自使用隔离范围和/或转换的指令的子范围继承自其父范围,因此您理论上可以在控制器的范围上设置属性,并使用{{1}在指令中直接访问它}集。请务必仔细阅读我在顶部提到的文章,因为这有一些问题。

但是,这对你的指令意味着什么,你应该如何进行重构来做你想做的事情?这是你必须要有点想象力和实验的地方。并且可能没有“一刀切”的解决方案。您可能必须就应用程序需要多少配置做出一些决定,并在指令中单独考虑每个配置。

我意识到这可能不是你所希望的答案,但希望至少能让你知道如何解决这个问题!