AngularJs 中的transclude的理解
阿新 • • 發佈：2017-05-17
str stack class dex angular http tom strong 例子
/* */ },
template: ‘<div>‘ +
‘<div>{{name}}</div><br>‘ +
‘<div ng-transclude></div>‘ +
‘</div>‘
};
});
Transclude是一個配置, 為了告訴AngularJs去獲取當前指令模版內部的所有內容(實際使用ng-transclude), 更多關於怎麽創建一個包含其他元素的指令: documentation of directives
下面自定義一個指令用ng-transclude在指令模版中去指定你想插入的內容:
angular.module(‘app‘, [])
.directive(‘hero‘, function () {
return {
restrict: ‘E‘,
transclude: true,
scope: { name:[email protected]代碼使用如下:
<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:[email protected]
