如何使ng-transclude表现得像ng-include(在范围方面)?

时间:2016-06-02 15:07:06

标签: javascript angularjs angularjs-ng-transclude

我希望将内容转换为内容,就好像我将内容复制粘贴到我编写<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=""的指令的范围来评估已转换的内容。也就是说,“item”不存在。

如何制作这样的内容,以便使用包含已转换内容的指令范围评估已转换的内容?

1 个答案:

答案 0 :(得分:2)

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

the docs中所述,DDO的template属性可以是一个函数,在这种情况下它接收模板元素作为参数(以及其他内容)并且应该返回指令的模板作为字符串。

您可以使用以下内容:

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

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

以下是使用.component() API的simple demo(在v1.5中引入)。如果您想使用普通的.directive(),则会有一些细微差别,但您应该能够轻松地进行调整。