javascript - 如何使 ng-transclude 表现得像 ng-include (就范围而言)？

Question

我想嵌入内容，就像我将内容复制粘贴到我写 <div data-ng-transclude=""> 的文件中一样。 .我该怎么做？

我知道我可以使用 ng-include包括一个模板，我可以使用脚本标签来定义一个模板。但这会使模板缓存困惑并污染模板命名空间。

我想这样做，这样我就可以拥有一个(或多个!这就是重点)文件，我可以在其中定义我想要显示我的项目的方式，

<!-- list directive to show the items -->
<div data-item-list="" data-values="vm.items">

    <!-- content to include to display list items -->
    <div class="form-relation-picker-value" ng-bind="item.value.title"></div>
    <div class="form-relation-picker-subtitle" ng-bind="item.value.subTitle"></div>
</div>

还有一个文件，我在其中定义列表结构的工作方式。

<div class="list-container">
    <div class="list-item"
         data-ng-click="vm.select(item)"
         data-ng-repeat="item in vm.items | orderBy : vm.orderBy"
         data-selected="{{vm.isSelected(item)}}">

        <div class="flex">
            <div ng-transclude=""></div><!-- item display via transclude -->
            <div class="grid-col flex-icon form-relation-picker-chrome-height-fix">
                <div data-ng-show="vm.isSelected(item)" class="icon check"></div>
            </div>
        </div>
    </div>
</div>

---

如果我这样做，这会起作用:

<div data-item-list="" data-values="vm.items" data-template-to-use="randomhash">
    <script type="text/ng-template" id="randomhash">
        <div class="form-relation-picker-value" ng-bind="item.value.title"></div>
        <div class="form-relation-picker-subtitle" ng-bind="item.value.subTitle"></div>
    </script>
</div>

像这样的列表结构...

<div class="list-container">
    <div class="list-item"
         data-ng-click="vm.select(item)"
         data-ng-repeat="item in vm.items | orderBy : vm.orderBy"
         data-selected="{{vm.isSelected(item)}}">

        <div class="flex">
            <div data-ng-include="vm.templateToUse"></div>
            <div class="grid-col flex-icon form-relation-picker-chrome-height-fix">
                <div data-ng-show="vm.isSelected(item)" class="icon check"></div>
            </div>
        </div>
    </div>
</div>

但是，正如我所说，它会使模板缓存变得困惑。

如果我嵌入内容，它就会停止工作，因为嵌入的内容是在包含 <div data-item-list="" 的指令范围内评估的.也就是说，“项目”不存在。

我怎样才能使嵌入的内容在包含嵌入内容的指令范围内进行评估？

Answer 1

您需要的是一个模板函数，它将提取您的模板元素的内容(在 Angular 编译它之前出现在您的 HTML 中的元素)并将其嵌入到指令的模板中。

如 the docs 中所述，DDO 的 template 属性可以是一个函数，在这种情况下，它接收模板元素作为参数(除其他外)，并期望将指令的模板作为字符串返回。

你可以这样使用:

.directive('itemList', function itemListDirective() {
  // DDO
  return {
    ...
    template: function itemListTmplFn(tElem) {
      var customContent = tElem.html();

      return '...' + customContent + '...';
    }
  };
})

这是一个simple demo使用 .component() API(在 v1.5 中引入)。如果您想使用普通的旧 .directive()，会有一些细微差别，但您应该能够轻松调整它。