如何使 ng-transclude 表现得像 ng-include (就范围而言)?
How to make ng-transclude behave like ng-include (in terms of scope)?
我想嵌入内容,这样它就像我将内容复制粘贴到我写 <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" 不存在。
如何才能使嵌入的内容在包含嵌入内容的指令范围内进行评估?
您需要的是一个模板函数,它将提取模板元素的内容(在 Angular 编译它之前出现在您的 HTML 中的元素)并将其嵌入到指令的模板。
如the docs所述,DDO的template
属性可以是一个函数,在这种情况下它接收模板元素作为参数(在其他东西),并期望 return 指令的模板作为字符串。
你可以这样使用:
.directive('itemList', function itemListDirective() {
// DDO
return {
...
template: function itemListTmplFn(tElem) {
var customContent = tElem.html();
return '...' + customContent + '...';
}
};
})
这里是一个simple demo,它使用.component()
API(在v1.5 中引入)。如果您想使用普通的旧 .directive()
,会有一些细微差别,但您应该能够轻松适应它。
我想嵌入内容,这样它就像我将内容复制粘贴到我写 <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" 不存在。
如何才能使嵌入的内容在包含嵌入内容的指令范围内进行评估?
您需要的是一个模板函数,它将提取模板元素的内容(在 Angular 编译它之前出现在您的 HTML 中的元素)并将其嵌入到指令的模板。
如the docs所述,DDO的template
属性可以是一个函数,在这种情况下它接收模板元素作为参数(在其他东西),并期望 return 指令的模板作为字符串。
你可以这样使用:
.directive('itemList', function itemListDirective() {
// DDO
return {
...
template: function itemListTmplFn(tElem) {
var customContent = tElem.html();
return '...' + customContent + '...';
}
};
})
这里是一个simple demo,它使用.component()
API(在v1.5 中引入)。如果您想使用普通的旧 .directive()
,会有一些细微差别,但您应该能够轻松适应它。