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范围变量。 有什么办法可以做到这一点？
首先，在列表模板中，您应该通过ng-transclude="itemHeader"和ng-transclude-slot="itemFooter" ng-transclude-slot="itemHeader"通过ng-transclude="itemHeader" ng-transclude-slot="itemHeader"更改ng-transclude-slot="itemHeader" ng-transclude-slot="itemFooter" ，以使得ng-transclude="itemFooter"工作起作用。
然后，你在单例和列表例子中有一个错误。 如果您在提供的plunkr {items[0].name}更改了单个示例中预期的{data.name} ，您将看到该名称不再显示。 第二件事是解决这个共同的问题。
TL; DR; 工作示例：https://plnkr.co/edit/1ideOiohle8AEzkDJ333?p=preview
您遇到的基本问题是，当您跨接时，您可以访问的范围是顶级范围。 你想要的是从指令外引用项目级作用域。
所以，我没有在列表指令中使用transclusion，而是将一个字符串模板绑定为属性。 我必须使用编译功能拿起原始字符串值角翻出之前{{}}占位符，然后我用$interpolate来创建模板函数itemHeaderTemplate和itemFooterTemplate然后将其在模板中使用像这样ng-bind-html="itemHeaderTemplate({item: item})" 。
注意：为了使用ng-bind-html你需要包含ngSanitize模块，否则你会得到一个安全异常。