我是Angular的新手,但已经读了不少。
我正在阅读关于ng-transclude在 http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive,我想我理解正确它做什么。
我正在阅读关于ng-transclude在 http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive,我想我理解正确它做什么。
如果你有一个指令适用于其中包含内容的元素,例如
<my-directive>directive content</my-directive>
它将允许您使用ng-transclude对指令模板中的元素进行标记,并且元素中包含的内容将在标记的元素内部呈现。
因此如果myDirective的模板在< / div>之后的< / div>< divng-transclude>之前< / div>< div&
它将呈现为前导内容之后。
这是所有o.k.
我的Q是有可能以某种方式传递更多,然后一个单一的HTML块到我的指令?
例如
假设指令的用法如下所示:
<my-multipart-directive> <part1>content1</part1> <part2>content2</part2> </my-multipart-directive>
并有一个模板如:
<div> this: <div ng-transclude="part2"></div> was after that: <div ng-transclude="part1"></div> but now they are switched <div>
呈现为
<div> this: <div ng-transclude="part2">content2</div> was after that: <div ng-transclude="part1">content1</div> but now they are switched <div>
?
(思考自己)我可以不知何故将一个节点的HTML值绑定到模型,这样我就可以使用它,而不用调用它“transclude”…
谢谢
启动Angular 1.5,现在可以创建多个插槽。而不是transclude:true,您提供一个对象与每个插槽的映射:
原文链接:https://www.f2er.com/angularjs/145799.htmlhttps://docs.angularjs.org/api/ng/directive/ngTransclude
angular.module('multiSlotTranscludeExample',[]) .directive('pane',function(){ return { restrict: 'E',transclude: { 'title': '?pane-title','body': 'pane-body','footer': '?pane-footer' },template: '<div style="border: 1px solid black;">' + '<div class="title" ng-transclude="title">Fallback Title</div>' + '<div ng-transclude="body"></div>' + '<div class="footer" ng-transclude="footer">Fallback Footer</div>' + '</div>' }; })