transclude是一個可選的參數。如果設置了,其值必須爲true,它的默認值是false。
嵌入有時被認爲是一個高級主題,但某些情況下它與我們剛剛學習過的作用域之間會有非常 好的配合。使用嵌入也會很好地擴充我們的工具集,特別是在創建可以在團隊、項目、AngularJS 社區之間共享的HTML代碼片段時。嵌入通常用來創建可複用的組件,典型的例子是模態對話框或導航欄。
我們可以將整個模板,包括其中的指令通過嵌入全部傳入一個指令中。這樣做可以將任意內 容和作用域傳遞給指令。transclude參數就是用來實現這個目的的,指令的內部可以訪問外部 指令的作用域,並且模板也可以訪問外部的作用域對象。
爲了將作用域傳遞進去,scope參數的值必須通過{}或true設置成隔離作用域。如果沒有設 置scope參數,那麼指令內部的作用域將被設置爲傳入模板的作用域。
嵌入允許指令的使用者方便地提供自己的HTML模板,其中可以包含獨特的狀態和行爲,並對指令的各方面進行自定義。下面一起來實現個小例子,創建一個可以被自定義的可複用指令。
我們來創建一個可以複用的側邊欄,同WordPress博客的側邊欄很相似。我們希望可以保持CSS樣式的一致性,同時又希望可以在複用時儘量少寫HTML代碼。
例如,假設我們想創建一個包括標題和少量HTML內容的側邊欄,如下所示
<div sidebox title="Links">
<ul>
<li>First link</li>
<li>Second link</li>
</ul>
</div>
<script>
angular.module('myApp', [])
.directive('sidebox', function() {
return {
restrict: 'EA',
scope: {
title: '@'
},
transclude: true,
template: '<div class="sidebox">\
<div class="content">\
<h2 class="header">{{ title }}</h2>\
<span class="content" ng-transclude>\
</span>\
</div>\
</div>'
}; });
</script>這段代碼告訴AngularJS編譯器,將它從DOM元素中獲取的內容放到它發現ng-transclude 指令的地方。
藉助transclusion,我們可以將指令複用到第二個元素上,而無須擔心樣式和佈局的一致 性問題。
例如,下面的代碼會產生兩個樣式完全一致的側邊欄
<div sideboxtitle="Links">
<ul>
<li>First link</li>
<li>Second link</li>
</ul>
</div>
<div sideboxtitle="TagCloud"> 11
<div class="tagcloud">
<a href="">Graphics</a>
<a href="">AngularJS</a>
<a href="">D3</a>
<a href="">Front-end</a>
<a href="">Startup</a>
</div>
</div>
以上文章來源於《Angular權威教程》 p82