angularjs - Angular 1.5中的多级包含

我有一个通用的<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>并未被嵌入到它们的正确位置，并且它们无法读取item范围变量。有什么办法可以做到这一点？

最佳答案

首先，在 list 模板中，您应该将ng-transclude-slot="itemHeader"更改为ng-transclude="itemHeader"，将ng-transclude-slot="itemFooter"更改为ng-transclude="itemFooter"，以使转换生效。

然后，您在单例和 list 示例中都犯了一个错误。如果在单个示例中用所需的{items[0].name}更改了提供的plunkr {data.name}，您将看到该名称不再显示。第二件事是解决此共享问题。

关于angularjs - Angular 1.5中的多级包含，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35321659/