AngularJs 中的transclude的理解
Posted Jason.Zeng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs 中的transclude的理解相关的知识，希望对你有一定的参考价值。
Transclude是一个配置, 为了告诉AngularJs去获取当前指令模版内部的所有内容(实际使用ng-transclude), 更多关于怎么创建一个包含其他元素的指令: documentation of directives
下面自定义一个指令用ng-transclude在指令模版中去指定你想插入的内容:
angular.module(‘app‘, [])
.directive(‘hero‘, function () {
return {
restrict: ‘E‘,
transclude: true,
scope: { name:‘@‘ },
template: ‘<div>‘ +
‘<div>{{name}}</div><br>‘ +
‘<div ng-transclude></div>‘ +
‘</div>‘
};
});代码使用如下:
<hero name="superman">Stuff inside the custom directive</hero>页面显示如下:
Superman
Stuff inside the custom directive
完整的例子:
Index.html
<body ng-app="myApp">
<div class="AAA">
<hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>jscript.js
angular.module(‘myApp‘, []).directive(‘hero‘, function () {
return {
restrict: ‘E‘,
transclude: true,
scope: { name:‘@‘ },
template: ‘<div>‘ +
‘<div>{{name}}</div><br>‘ +
‘<div ng-transclude></div>‘ +
‘</div>‘
};
});页面:
实现:
以上是关于AngularJs 中的transclude的理解的主要内容，如果未能解决你的问题，请参考以下文章
[AngularJS] Angular 1.5 multiple transclude
AngularJS 高级选项卡 - 两个 ng-transclude