真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

 $AAAAAA $我是指令[one-transclude]元素內(nèi)部的內(nèi)容

angular.module('app', [])
 .directive('oneTransclude', oneTransclude);

function oneTransclude() {
 return {
 restrict: 'AE',
 transclude: true,
 templateUrl: 'one-transclude.html'
 };
}

 
 $BBBBBB$ 我是指令[one-transclude]模板的內(nèi)容
 

上面書寫了我們的指令模板，可以看到我們的模板由兩部分組成，一部分是含有ng-transclude指令的，一部分是不含有這個指令的。當(dāng)然我也把這些里面的內(nèi)容作了一些標(biāo)記，方便后面我們觀察。因?yàn)檫@里的ng-transclude后面不帶有參數(shù)，所以指令里面的元素就是那些以$AAAAAA$開頭的整塊元素都會嵌入到指令模板中含有ng-transclude指令的內(nèi)部，還要注意，如果指令模板中含有ng-transclude指令的元素內(nèi)部也有元素的話，那么這些元素會被替代。還有一種情況，那就是如果指令里面不含有元素，那么指令模板里面的含有ng-transclude指令的元素的內(nèi)部元素會顯示出來

4、我們可以看下圖更直觀的了解一下。

多個嵌入點(diǎn)的情況，這時候指令內(nèi)部的ng-transclude的值是一個對象，一種映射關(guān)系；具體的可以看下面的代碼：

5、指令在頁面中使用的代碼：

 我是指令元素內(nèi)部的title
 我是指令元素內(nèi)部的body
 我是指令元素內(nèi)部的footer

我們在頁面中使用了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對象定義了如何將多個嵌入點(diǎn)與指令內(nèi)部的指令嵌入點(diǎn)一一對應(yīng)，拿'footer': '?multiTranscludeFooter'來解釋一下，footer對應(yīng)指令模板中的一個嵌入點(diǎn)，multiTranscludeFooter對應(yīng)指令元素內(nèi)部的哪個multi-transclude-footer指令，前面的?表示這個嵌入點(diǎn)不一定有對應(yīng)的指令存在。當(dāng)然multiTranscludeFooter是我們自己定義的，可以隨意定義，但是盡量做到讓大家一看就知道是對應(yīng)哪個嵌入點(diǎn)就行。

7、指令對應(yīng)的模板

 
 
忽略我,我就是證明我是在模板中的1
 
 
忽略我,我就是證明我是在模板中的2
 

從上面的模板中我們可以看到，指令ng-transclude后面的字符串就是我們定義的嵌入點(diǎn)，也就是上面指令定義時候用到的那些字符串。

到這里關(guān)于ng-transclude以及angular指令的transclude選項(xiàng)我想大家應(yīng)該都明白了。

完整的代碼部分

1、index.html

指令one-transclude 內(nèi)部含有元素


 $AAAAAA $我是指令[one-transclude]元素內(nèi)部的內(nèi)容



指令one-transclude 內(nèi)部不含有元素



指令mutil-transclude


 我是指令元素內(nèi)部的title
 我是指令元素內(nèi)部的body
 我是指令元素內(nèi)部的footer

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

 
 $BBBBBB$ 我是指令[one-transclude]模板的內(nèi)容
 
 

 
 $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的內(nèi)容
 

4、multi-transclude.html

 
 
忽略我,我就是證明我是在模板中的1
 
 
忽略我,我就是證明我是在模板中的2
 

以上是“angular.js指令中transclude選項(xiàng)及ng-transclude指令怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！