AngularJS 把節(jié)點內(nèi)容作為變量處理的類型

回顧最開始的那個代碼顯示的例子，那個例子只能處理一次節(jié)點內(nèi)容。如果節(jié)點的內(nèi)容是一個變量的話，需要用另外的思路來考慮。這里我們假設(shè)的例子是，定義一個指令 showLenght ，它的作用是在一段文本的開頭顯示出這段節(jié)點文本的長度，節(jié)點文本是一個變量。指令使用的形式是：

<div ng-controller="TestCtrl">
  <div show-length>{{ text }}</div>
  <button ng-click="text='xx'">改變</button>
</div>

從上面的 HTML 代碼中，大概清楚 ng 解析它的過程（只看 show-length 那一行）：

• 解析 div 時發(fā)現(xiàn)了一個 show-length 的指令。
• 如果 show-length 指令設(shè)置了 transclude 屬性，則 div 的節(jié)點內(nèi)容被重新編譯，得到的 link 函數(shù)作為指令 compile 函數(shù)的參數(shù)傳入。
• 如果 show-length 指令沒有設(shè)置 transclude 屬性，則繼續(xù)處理它的子節(jié)點（ TextNode ）。
• 不管是上面的哪種情況，都會繼續(xù)處理到 {{ text }} 這段文本。
• 發(fā)現(xiàn) {{ text }} 是一個 Interpolate ，于是自動在此節(jié)點中添加了一個指令，這個指令的 link 函數(shù)就是為 scope 添加了一個 $watch ，實現(xiàn)的功能是是當(dāng) scope 作 $digest 的時候，就更新節(jié)點文本。

與處理 {{ text }} 時添加的指令相同，我們實現(xiàn) showLength 的思路，也就是：

• 修改原來的 DOM 結(jié)構(gòu)
• 為 scope 添加 $watch ，當(dāng) $digest 時修改指定節(jié)點的文本，其值為指定節(jié)點文本的長度。

代碼如下：

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是節(jié)點沒,其它值是節(jié)點的內(nèi)容沒
          restrict: 'A'};
});

上面代碼中，因為設(shè)置了 transclude 屬性，我們在 showLength 的 link 函數(shù)（就是 return 的那個函數(shù)）中，使用 func 的第三個函數(shù)來重塑了原來的文本節(jié)點，并放在我們需要的位置上。然后，我們添加自己的節(jié)點來顯示長度值。最后給當(dāng)前的 scope 添加 $watch ，以更新這個長度值。