angular.js指令中transclude選項及ng-transclude指令詳解

更新時間：2017年05月24日 10:19:46 作者：dreamapplehappy

這篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude選項的相關(guān)資料，文中介紹的非常詳細(xì)，并給出了完整的示例代碼大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。

前言

在開始本文之前，首先要說明我們使用的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í)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: