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>不会被转移到适当的位置，而且它们不能阅读item范围变量。有没有办法实现这个目标？

Answer 1

首先，在商品详情模板中，您应该ng-transclude-slot="itemHeader"更改ng-transclude="itemHeader"，ng-transclude-slot="itemFooter"更改ng-transclude="itemFooter"，以便将商家用于转换。

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

Answer 2

TL; DR;工作范例： https://plnkr.co/edit/1ideOiohle8AEzkDJ333?p=preview

您遇到的基本问题是，当您进行转置时，您可以访问的范围是顶级范围。您想要的是从指令外部引用项目级别范围。

因此，我没有在listing指令上使用transclusion，而是将字符串模板绑定为属性。我必须使用编译函数在角度拉出{{}}占位符之前获取原始字符串值，然后使用$interpolate创建模板函数itemHeaderTemplate和itemFooterTemplate然后在模板中使用，如ng-bind-html="itemHeaderTemplate({item: item})"。

注意：要使用ng-bind-html，您需要包含ngSanitize模块，否则您将获得安全例外。