angularjs – 如何传递HTML到角度指令？

发布时间：2020-12-17 08:36:31 所属栏目：安全来源：网络整理

导读：我试图创建一个角度指令与模板，但我也不想失去的HTML里面的div。例如，这里是我想从HTML调用我的指令： div my-dir div class="contents-i-want-to-keep"/div/div 然后，有我的指令： app.directive('myDir',[ '$compile',function($compile) {return { res

我试图创建一个角度指令与模板，但我也不想失去的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>

谢谢！

您需要使用 ng-transclude，在指令选项中添加transclude：true，并将ng-transclude添加到模板中：

<div class="example" style="…" ng-transclude></div>`

这个plunkr有一个例子，说明如何使用ng-transclude和模板，保留原来的dom元素。

http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!