angular學習筆記(三十)-指令(4)-transclude

詩&遠方發表於2014-09-03
Angular筆記

本篇主要介紹指令的transclude屬性:

transclude的值有三個:

1.transclude:false(預設值)

不啟用transclude功能.

 

2.transclude:true

啟用transclude,啟用以後,有兩個地方會發生變化:

①.使用指令的元素內部的所有內容都會被儲存起來.不妨先把這一段內容稱為一坨.

比如指令元素是這樣的: <cd-hello><h3>code_bunny</h3></cd-hello>,那麼,這一坨就是<h3>code_bunny</h3>

②.在指令的模板中,元素可以新增ng-transclude屬性,新增了這個屬性的元素,會被剛才的那一坨內容所填充.

比如模板是這樣的: 

<div>
    <h2>hello</h2>
    <div ng-transclude></div>
</div>

使用後會變成:

<div>
    <h2>hello</h2>
    <div ng-transclude><h3>code_bunny</h3></div>
</div>

需要注意的一點是,這一坨內容,應該是有標籤的,如果是純文字,沒有標籤,那麼,它被放入ng-transclude元素以後,會自動新增span標籤來包含文字內容:

比如指令元素是這樣的: <cd-hello>code_bunny</cd-hello>

模板是這樣的:

    <div>
      <h2>hello</h2>
      <div ng-transclude></div>
    </div>

那麼使用後會變成:

<div>
    <h2>hello</h2>
    <div ng-transclude><span>code_bunny</span></div>
</div>

下面舉個栗子:

html:

<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
  <title>20.5指令</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script type="text/ng-template" id="text.html">
    <div>
      <h3>{{title}}</h3>
      <div ng-transclude></div>
    </div>
  </script>
  <script src="script.js"></script>
  <style type="text/css">
    *{
      font-family:'MICROSOFT YAHEI';
      font-size:12px
    }
    h3 {
      color:#CB2027
    }
  </style>
</head>
<body>
  <input ng-model="title"/>
  <br/>
  <textarea cols="30" rows="4" ng-model="text"></textarea>
  <div cd-text>{{text}}</div>
</body>
</html>

js:

/*20.5 指令 */
var appModule = angular.module('dirAppModule', []);
appModule.directive('cdText',function(){
    return {
        restrict:'EAC',
        templateUrl:'text.html',
        replace:true,
        transclude:true
    }
});

最後得到的結果:

可以看到,{{text}}被放在了有ng-transclude指令的div裡,並且由於{{text}}沒有被任何標籤包含,它自動新增了span標籤來包含它.

 

3.transclude:'element'

當transclude的值為'element'時(注意element就是element這個單詞,而不是自己寫元素名),基本上和ture用法是一致的,唯一的區別是,為true的情況下,那一坨是指令元素內部的內容,而為'element'時,那一坨是整個指令元素:

比如指令元素是這樣的: <cd-hello><h3>code_bunny</h3></cd-hello>,那麼,這一坨就是<cd-hello><h3>code_bunny</h3></cd-hello>

值得注意的是,雖然cd-hello這個元素本身就是個指令元素,它會被模板內容填充(或替換),但是,當它作為ng-transclude的一坨被插入到ng-transclude的元素裡,是不會再應用cd-hello指令,無限次被替換下去進入死迴圈的...

還是2的栗子,我們把transclude屬性值改為'element'以後可以看到,所有的效果都是不變的,唯獨ng-transclude指令元素裡的一坨變為整個cd-text元素:

 

4. transclude()函式

在一個模板裡,ng-transclude指令只能被使用一次.所以,如果需要重複使用那一坨,需要使用transclude()函式,這個函式分別可以出現在以下三個地方:

1.控制器裡,通過依賴注入 $transclude

2.link屬性的函式的第五個引數.只要順序是在第五個,名字取什麼不重要,一般就取transclude

3.compile屬性的函式的第三個引數.只要順序是在第三個,名字取什麼不重要,一般就取transclude

transclude()的用法是進階話題,需要理解angular的編譯,連結,指令的作用域.並且,只有ng-repeat這類指令才會用到.故這裡先放一放,日後再深入研究.

參考文件:http://www.html-js.com/article/1869

完整程式碼:https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/20.5%20%E6%8C%87%E4%BB%A4.html

　　　　 https://github.com/OOP-Code-Bunny/angular/blob/master/OREILLY/script.js

相關文章