我有一个基本指令,我想使用嵌入。相关选项设置如下:
restrict: "E",
replace: true,
transclude: {
'toolbar': 'toolbarSlot'
},
scope: {
pageTitle: "@"
},
templateUrl: "path/to/my/template.html"
Run Code Online (Sandbox Code Playgroud)
我的模板是:
<header class="page-header">
<h1 class="page-title heading">{{ pageTitle }}</h1>
<div class="page-header-toolbar toolbar" ng-transclude="toolbar">
<!-- "toolbar" transcluded content should go here -->
</div>
</header>
Run Code Online (Sandbox Code Playgroud)
最后,当我使用指令时,我是这样使用它的:
<my-custom-page-header-directive page-title="Title">
<toolbar-slot>
<button>Button</button>
<button>Another button</button>
</toolbar-slot>
</my-custom-page-header-directive>
Run Code Online (Sandbox Code Playgroud)
问题是,在 DOM 中,它最终是这样的,一个无关的toolbar-slot元素混合到嵌入的内容中:
<header class="page-header">
<h1 class="page-title heading">Title</h1>
<div class="page-header-toolbar toolbar">
<toolbar-slot>
<button>Button</button>
<button>Another button</button>
</toolbar-slot>
</div>
</header>
Run Code Online (Sandbox Code Playgroud)
有没有办法(使用ngTransclude)只嵌入插槽元素的内容?
javascript angularjs angularjs-directive angularjs-ng-transclude