溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“angular.js指令中transclude選項及ng-transclude指令怎么用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“angular.js指令中transclude選項及ng-transclude指令怎么用”這篇文章吧。
transclude字面意思就是嵌入，也就是說你需不需要將你的指令內(nèi)部的元素（注意不是指令的模板）嵌入到你的模板中去，默認是false。如果你需要這種功能的話，那么就需要將transclude設(shè)置為true或者{...}。如果將這個值設(shè)置為true或者{...}的話，那么就要配合angular的ng-transclude指令來進行使用，好，廢話不多說了，看代碼是最好的學習方法，我們下面就來根據(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)容做了一些標記，方便我們后面觀察。
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指令的，一部分是不含有這個指令的。當然我也把這些里面的內(nèi)容作了一些標記，方便后面我們觀察。因為這里的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)的指令存在。當然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"> <h2 ng-bind="vm.title"></h2> <h3>指令one-transclude 內(nèi)部含有元素</h3> <!-- 指令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> <h3>指令one-transclude 內(nèi)部不含有元素</h3> <!-- 指令one-transclude 內(nèi)部不含有元素 --> <one-transclude class="one-transclude-self"></one-transclude> <h3>指令mutil-transclude</h3> <!-- 指令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>
以上是“angular.js指令中transclude選項及ng-transclude指令怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼