最近學習angular，今天將指令中的transclude選項和ng-transclude指令總結一下。本文演示用的angular版本為1.5.11。
首先，angualar指令的transclude選項有三種值：false、true、object。transclude字面意思就是嵌入，也就是說你需不需要將你的指令中的內容（注意不是指令的模板）嵌入到你的模板中去，預設是false。如果你需要這種功能的話，那麼就需要將transclude設定為true或者。如果將這個值設定為true或者的話，那麼就要配合angular的ng-transclude指令來進行使用。下面我們通過**來學習如何使用。
我們在頁面中使用了自定義指令my-dialog,並且在該指令中新增了一段文字內容（指令中的內容）。
.controller('trascludectrl', ['$scope', function($scope) ])
.directive('mydialog', function() ,
templateurl: 'my-dialog.html',
link: function(scope)
};});
directive template, }
ng-transclude,}
可以看到指令中的內容填充到了指令模板中ng-transclude指令所在的元素中，ng-transclude指令所在元素的內容會被指令內容替代，並且此時指令內容受指令外部的作用域控制；但是當指令中沒有任何內容時（空格也不允許），ng-trasclude指令所在元素的內容會顯示出來，此時ng-trasclude指令所在元素的內容受指令外部的作用域控制。下面看一下改動**：
接下來，我們來看一下有多個嵌入點的情況，這時指令中的transclude選項是乙個物件。請看**：
我們的transclude物件定義了如何將多個嵌入點與指令內部的指令嵌入點一一對應，拿'footer': '?transcludefooter'來解釋一下，footer對應指令模板中的乙個嵌入點，transcludefooter對應指令元素內部的那個transclude-footer指令，前面的?表示這個嵌入點不一定有對應的指令存在。根據執行結果，我做出以下推論：首先指令模板替換（嵌入？）頁面中指令所在的元素；然後如果指令的transclude選項不為false，則從指令內容中選擇指定元素嵌入（替換？）到指令模板中的指定位置，而transclude物件就是確定對應關係的橋梁；最後如果指令中沒有對應關係的其它內容都會對應到ng-transclude。
參考文章：angular指令的transclude選項以及ng-transclude指令
angular的常用指令
因為ng bind 預設把html標籤轉義成字串。如果不想轉義。用這個指令。注意 當遍歷的時候，陣列有相同的值的時候，會報錯，用下面這種方法可以解決 track by ng repeat item in ccc track by index li name id ng model xx value ...
Angular頁面指令
分為元件帶模板的指令，結構性指令改變宿主文件結構 ngif ngswitch ngfor 屬性性指令改變宿主行為 ngmodel ngstyle ngclass innerhtml 將value作為html標籤來解析 textcontent 將value作為文字解析 ngif ngif 如果vlau...
angular基礎 指令
指令 directive 可以理解為沒有模版的元件，它需要寄宿在乙個元素上 宿主 host 1.hostbinding 繫結宿主的屬性或樣式 import from angular core directive export class griditemdirective 2.hostlistene...