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>' }; });页面:
实现:
