### 18.7. 把節點內容作為變量處理的類型 回顧最開始的那個代碼顯示的例子，那個例子只能處理一次節點內容。如果節點的內容是一個變量的話，需要用另外的思路來考慮。這里我們假設的例子是，定義一個指令 `showLenght` ，它的作用是在一段文本的開頭顯示出這段節點文本的長度，節點文本是一個變量。指令使用的形式是： <div ng-controller="TestCtrl"> <div show-length>{{ text }}</div> <button ng-click="text='xx'">改變</button> </div> 從上面的 HTML 代碼中，大概清楚 ng 解析它的過程（只看 `show-length` 那一行）： - 解析 `div` 時發現了一個 `show-length` 的指令。 - 如果 `show-length` 指令設置了 `transclude` 屬性，則 `div` 的節點內容被重新編譯，得到的 `link` 函數作為指令 `compile` 函數的參數傳入。 - 如果 `show-length` 指令沒有設置 `transclude` 屬性，則繼續處理它的子節點（ `TextNode` ）。 - 不管是上面的哪種情況，都會繼續處理到 `{{ text }}` 這段文本。 - 發現 `{{ text }}` 是一個 `Interpolate` ，于是自動在此節點中添加了一個指令，這個指令的 `link` 函數就是為 `scope` 添加了一個 `$watch` ，實現的功能是是當 `scope` 作 `$digest` 的時候，就更新節點文本。 與處理 `{{ text }}` 時添加的指令相同，我們實現 `showLength` 的思路，也就是： - 修改原來的 DOM 結構 - 為 `scope` 添加 `$watch` ，當 `$digest` 時修改指定節點的文本，其值為指定節點文本的長度。 代碼如下： app.directive('showLength', function($rootScope, $document){ var func = function(element, attrs, link){ return function(scope, ielement, iattrs, controller){ var node = link(scope); ielement.append(node); var lnode = $('<span></span>'); ielement.prepend(lnode); scope.$watch(function(scope){ lnode.text(node.text().length); }); }; } return {compile: func, transclude: true, // element是節點沒,其它值是節點的內容沒 restrict: 'A'}; }); 上面代碼中，因為設置了 `transclude` 屬性，我們在 `showLength` 的 `link` 函數（就是 `return` 的那個函數）中，使用 `func` 的第三個函數來重塑了原來的文本節點，并放在我們需要的位置上。然后，我們添加自己的節點來顯示長度值。最后給當前的 `scope` 添加 `$watch` ，以更新這個長度值。