前言
在開始本文之前，首先要說明我們使用的angular的版本是1.5.0，因為不同版本的表現(xiàn)結(jié)果不是那么相同。
首先我們應(yīng)該了解到，在angular指令的選項中，有一項是transclude，這個選項有三種值：false，true，object；那這三種值分別表示什么，該如何選擇？
下面我們來詳細(xì)的說明一下。
transclude字面意思就是嵌入，也就是說你需不需要將你的指令內(nèi)部的元素（注意不是指令的模板）嵌入到你的模板中去，默認(rèn)是false。如果你需要這種功能的話，那么就需要將transclude設(shè)置為true或者{...}。如果將這個值設(shè)置為true或者{...}的話，那么就要配合angular的ng-transclude指令來進(jìn)行使用，好，廢話不多說了，看代碼是最好的學(xué)習(xí)方法，我們下面就來根據(jù)代碼來了解掌握這些東西。
代碼的結(jié)果可以在這里看到，完整的代碼會在后面貼出來。
現(xiàn)在我們來看第一個指令部分
1、在頁面中使用的形式
<!-- 指令one-transclude 內(nèi)部含有元素--><one-transclude class="one-transclude-self"> <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素內(nèi)部的內(nèi)容</div></one-transclude>
我們定義了一個名字叫做one-transclude的指令，也就是說這個指令的模板中只有一個嵌入點的，指令內(nèi)部是有一些元素的我給內(nèi)部的元素的內(nèi)容做了一些標(biāo)記，方便我們后面觀察。
2、JavaScript代碼部分
angular.module('app', []) .directive('oneTransclude', oneTransclude);function oneTransclude() { return { restrict: 'AE', transclude: true, templateUrl: 'one-transclude.html' };}我們在JavaScript中定義oneTransclude，注意我們這里transclude=true，表明我們希望在模板中將指令的內(nèi)部元素嵌入到模板中的某個位置。
3、指令的模板部分
<div class="one-transclude"> <div class="one-transclude__title"> $BBBBBB$ 我是指令[one-transclude]模板的內(nèi)容 </div> <hr> <ng-transclude> $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的內(nèi)容 </ng-transclude></div>
上面書寫了我們的指令模板，可以看到我們的模板由兩部分組成，一部分是含有ng-transclude指令的，一部分是不含有這個指令的。當(dāng)然我也把這些里面的內(nèi)容作了一些標(biāo)記，方便后面我們觀察。因為這里的ng-transclude后面不帶有參數(shù)，所以指令里面的元素就是那些以$AAAAAA$開頭的整塊元素都會嵌入到指令模板中含有ng-transclude指令的內(nèi)部，還要注意，如果指令模板中含有ng-transclude指令的元素內(nèi)部也有元素的話，那么這些元素會被替代。還有一種情況，那就是如果指令里面不含有元素，那么指令模板里面的含有ng-transclude指令的元素的內(nèi)部元素會顯示出來
4、我們可以看下圖更直觀的了解一下。
多個嵌入點的情況，這時候指令內(nèi)部的ng-transclude的值是一個對象，一種映射關(guān)系；具體的可以看下面的代碼：
5、指令在頁面中使用的代碼：
<!-- 指令mutil-transclude --><multi-transclude> <multi-transclude-title>我是指令元素內(nèi)部的title</multi-transclude-title> <multi-transclude-body>我是指令元素內(nèi)部的body</multi-transclude-body> <multi-transclude-footer>我是指令元素內(nèi)部的footer</multi-transclude-footer></multi-transclude>
我們在頁面中使用了multi-transclude這個指令，在指令的內(nèi)部還有三個指令，這內(nèi)部的三個指令要以E的形式應(yīng)用，不然會出現(xiàn)問題，看到這里不明白的沒關(guān)系，繼續(xù)往下看。
6、JavaScript代碼中的指令：
angular.module('app', []) .directive('multiTransclude', multiTransclude); function multiTransclude() { return { restrict: 'AE', transclude: { 'title': 'multiTranscludeTitle', 'body': 'multiTranscludeBody', 'footer': '?multiTranscludeFooter' }, templateUrl: 'multi-transclude.html' };}我們的transclude對象定義了如何將多個嵌入點與指令內(nèi)部的指令嵌入點一一對應(yīng)，拿'footer': '?multiTranscludeFooter'來解釋一下，footer對應(yīng)指令模板中的一個嵌入點，multiTranscludeFooter對應(yīng)指令元素內(nèi)部的哪個multi-transclude-footer指令，前面的?表示這個嵌入點不一定有對應(yīng)的指令存在。當(dāng)然multiTranscludeFooter是我們自己定義的，可以隨意定義，但是盡量做到讓大家一看就知道是對應(yīng)哪個嵌入點就行。
7、指令對應(yīng)的模板
<div class="multi-transclude"> <div class="multi-transclude__title" ng-transclude="title"></div> <div>忽略我,我就是證明我是在模板中的1</div> <div class="multi-transclude__body" ng-transclude="body"></div> <div>忽略我,我就是證明我是在模板中的2</div> <div class="multi-transclude__footer" ng-transclude="footer"></div></div>
從上面的模板中我們可以看到，指令ng-transclude后面的字符串就是我們定義的嵌入點，也就是上面指令定義時候用到的那些字符串。
到這里關(guān)于ng-transclude以及angular指令的transclude選項我想大家應(yīng)該都明白了。
完整的代碼部分
1、index.html
<body ng-controller="MyController as vm"><h1 ng-bind="vm.title"></h1><h2>指令one-transclude 內(nèi)部含有元素</h2><!-- 指令one-transclude 內(nèi)部含有元素--><one-transclude class="one-transclude-self"> <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素內(nèi)部的內(nèi)容</div></one-transclude><h2>指令one-transclude 內(nèi)部不含有元素</h2><!-- 指令one-transclude 內(nèi)部不含有元素 --><one-transclude class="one-transclude-self"></one-transclude><h2>指令mutil-transclude</h2><!-- 指令mutil-transclude --><multi-transclude> <multi-transclude-title>我是指令元素內(nèi)部的title</multi-transclude-title> <multi-transclude-body>我是指令元素內(nèi)部的body</multi-transclude-body> <multi-transclude-footer>我是指令元素內(nèi)部的footer</multi-transclude-footer></multi-transclude></body>
2、app.js
(function() {angular.module('app', []) .controller('MyController', myController) .directive('oneTransclude', oneTransclude) .directive('multiTransclude', multiTransclude);myController.$inject = [];function myController() { var vm = this; vm.title = 'ng-transclude';}function oneTransclude() { return { restrict: 'AE', transclude: true, templateUrl: 'one-transclude.html' };}function multiTransclude() { return { restrict: 'AE', transclude: { 'title': 'multiTranscludeTitle', 'body': 'multiTranscludeBody', 'footer': '?multiTranscludeFooter' }, templateUrl: 'multi-transclude.html' };}})();3、one-transclude.html
<div class="one-transclude"> <div class="one-transclude__title"> $BBBBBB$ 我是指令[one-transclude]模板的內(nèi)容 </div> <hr> <ng-transclude> $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的內(nèi)容 </ng-transclude></div>
4、multi-transclude.html
<div class="multi-transclude"> <div class="multi-transclude__title" ng-transclude="title"></div> <div>忽略我,我就是證明我是在模板中的1</div> <div class="multi-transclude__body" ng-transclude="body"></div> <div>忽略我,我就是證明我是在模板中的2</div> <div class="multi-transclude__footer" ng-transclude="footer"></div></div>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點
疑難解答
