Angular 1.5中的多级转换

Question

我有一个泛型<item>指令,以及一个<listing>带有过滤器和分页工具的指令,用于列出<item>:

示例:https://plnkr.co/edit/r6byzhFX5m674ONhH1JS？p = preview

该<listing>模板是这样的:

<div ng-repeat="item in items">
  <item date="item">
        <ng-transclude ng-transclude-slot="itemContent"></ng-transclude>
  </item>
</div>

该<item>指令使用新的Angular 1.5多槽转换来轻松自定义页脚和标题:

<item data="itemData">
  <header>My header</header>
  <footer>My custom footer</footer>
</item>

当我尝试在使用时自定义项目时出现问题<listing>.如果我使用这样的东西:

<listing items="myItems">
  <item-content>
        <header>{{ item.name }}</header>
        <footer>My custom footer for {{ item.name }}</footer>
  </item-content>
</listing>

这是行不通的,因为<item-content>被插入<item>,但<header>并<footer>没有得到transcluded到他们适当的地方,他们无法读取item范围变量.有没有办法实现这个目标？

Answer 1

首先，在列表模板中，您应该ng-transclude-slot="itemHeader"不断更改ng-transclude="itemHeader"以ng-transclude-slot="itemFooter"使ng-transclude="itemFooter"嵌入起作用。

然后，您在单个和列表示例中出现错误。{items[0].name}如果您按单个示例中的预期更改提供的 plunkr，{data.name}您将看到该名称不再显示。第二件事是解决这个共同的问题。