溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“angular.js指令中transclude選項及ng-transclude指令怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“angular.js指令中transclude選項及ng-transclude指令怎么用”這篇文章吧。
transclude字面意思就是嵌入，也就是說你需不需要將你的指令內部的元素（注意不是指令的模板）嵌入到你的模板中去，默認是false。如果你需要這種功能的話，那么就需要將transclude設置為true或者{...}。如果將這個值設置為true或者{...}的話，那么就要配合angular的ng-transclude指令來進行使用，好，廢話不多說了，看代碼是最好的學習方法，我們下面就來根據代碼來了解掌握這些東西。
代碼的結果可以在這里看到，完整的代碼會在后面貼出來。
現在我們來看第一個指令部分
1、在頁面中使用的形式
<!-- 指令one-transclude 內部含有元素--> <one-transclude class="one-transclude-self"> <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素內部的內容</div> </one-transclude>
我們定義了一個名字叫做one-transclude的指令，也就是說這個指令的模板中只有一個嵌入點的，指令內部是有一些元素的我給內部的元素的內容做了一些標記，方便我們后面觀察。
2、JavaScript代碼部分
angular.module('app', [])
.directive('oneTransclude', oneTransclude);
function oneTransclude() {
return {
restrict: 'AE',
transclude: true,
templateUrl: 'one-transclude.html'
};
}我們在JavaScript中定義oneTransclude，注意我們這里transclude=true，表明我們希望在模板中將指令的內部元素嵌入到模板中的某個位置。
3、指令的模板部分
<div class="one-transclude"> <div class="one-transclude__title"> $BBBBBB$ 我是指令[one-transclude]模板的內容 </div> <hr> <ng-transclude> $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的內容 </ng-transclude> </div>
上面書寫了我們的指令模板，可以看到我們的模板由兩部分組成，一部分是含有ng-transclude指令的，一部分是不含有這個指令的。當然我也把這些里面的內容作了一些標記，方便后面我們觀察。因為這里的ng-transclude后面不帶有參數，所以指令里面的元素就是那些以$AAAAAA$開頭的整塊元素都會嵌入到指令模板中含有ng-transclude指令的內部，還要注意，如果指令模板中含有ng-transclude指令的元素內部也有元素的話，那么這些元素會被替代。還有一種情況，那就是如果指令里面不含有元素，那么指令模板里面的含有ng-transclude指令的元素的內部元素會顯示出來
4、我們可以看下圖更直觀的了解一下。
多個嵌入點的情況，這時候指令內部的ng-transclude的值是一個對象，一種映射關系；具體的可以看下面的代碼：
5、指令在頁面中使用的代碼：
<!-- 指令mutil-transclude --> <multi-transclude> <multi-transclude-title>我是指令元素內部的title</multi-transclude-title> <multi-transclude-body>我是指令元素內部的body</multi-transclude-body> <multi-transclude-footer>我是指令元素內部的footer</multi-transclude-footer> </multi-transclude>
我們在頁面中使用了multi-transclude這個指令，在指令的內部還有三個指令，這內部的三個指令要以E的形式應用，不然會出現問題，看到這里不明白的沒關系，繼續往下看。
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對象定義了如何將多個嵌入點與指令內部的指令嵌入點一一對應，拿'footer': '?multiTranscludeFooter'來解釋一下，footer對應指令模板中的一個嵌入點，multiTranscludeFooter對應指令元素內部的哪個multi-transclude-footer指令，前面的?表示這個嵌入點不一定有對應的指令存在。當然multiTranscludeFooter是我們自己定義的，可以隨意定義，但是盡量做到讓大家一看就知道是對應哪個嵌入點就行。
7、指令對應的模板
<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后面的字符串就是我們定義的嵌入點，也就是上面指令定義時候用到的那些字符串。
到這里關于ng-transclude以及angular指令的transclude選項我想大家應該都明白了。
完整的代碼部分
1、index.html
<body ng-controller="MyController as vm"> <h2 ng-bind="vm.title"></h2> <h3>指令one-transclude 內部含有元素</h3> <!-- 指令one-transclude 內部含有元素--> <one-transclude class="one-transclude-self"> <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素內部的內容</div> </one-transclude> <h3>指令one-transclude 內部不含有元素</h3> <!-- 指令one-transclude 內部不含有元素 --> <one-transclude class="one-transclude-self"></one-transclude> <h3>指令mutil-transclude</h3> <!-- 指令mutil-transclude --> <multi-transclude> <multi-transclude-title>我是指令元素內部的title</multi-transclude-title> <multi-transclude-body>我是指令元素內部的body</multi-transclude-body> <multi-transclude-footer>我是指令元素內部的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]模板的內容 </div> <hr> <ng-transclude> $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的內容 </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指令怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
