我试图创建一个角度指令与模板,但我也不想失去的HTML里面的div。例如,这里是我想从HTML调用我的指令:
<div my-dir> <div class="contents-i-want-to-keep"></div> </div>
然后,有我的指令:
app.directive('myDir',[ '$compile',function($compile) { return { restrict: 'E',link: function(scope,iElement,iAttrs){ // assigning things from iAttrs to scope goes here },scope: '@',replace: false,templateUrl: 'myDir.html' }; }]);
然后有myDir.html,其中我定义了一个新的元素:
<div class="example" style="background: blue; height: 30px; width: 30px"></div>
即使我设置替换为false,我失去了内部的内容,我想要保持div – 我对角度文档的理解是,这将被追加在我的模板后。有没有一些方法来保存这个(可能通过我的链接功能?),使结果将是
<div class="example" style="background: blue; height: 30px; width: 30px"> <div class="contents-i-want-to-keep"></div> </div>
谢谢!
您需要使用
原文链接:https://www.f2er.com/angularjs/145579.htmlng-transclude
,在指令选项中添加transclude:true,并将ng-transclude添加到模板中:
<div class="example" style="…" ng-transclude></div>`
这个plunkr有一个例子,说明如何使用ng-transclude和模板,保留原来的dom元素。