AngularJS Attributes的細(xì)節(jié)

節(jié)點屬性被包裝之后會傳給 compile 和 link 函數(shù)。從這個操作中，我們可以得到節(jié)點的引用，可以操作節(jié)點屬性，也可以為節(jié)點屬性注冊偵聽事件。

<test a="1" b c="xxx"></test>

var app = angular.module('Demo', [], angular.noop);

app.directive('test', function(){
  var func = function($element, $attrs){
    console.log($attrs);
  }

  return {compile: func,
          restrict: 'E'}

整個 Attributes 對象是比較簡單的，它的成員包括了：

$$element 屬性所在的節(jié)點。

$attr 所有的屬性值（類型是對象）。

$normalize 一個名字標(biāo)準(zhǔn)化的工具函數(shù)，可以把 ng-click 變成 ngClick 。

$observe 為屬性注冊偵聽器的函數(shù)。

$set 設(shè)置對象屬性，及節(jié)點屬性的工具。

除了上面這些成員，對象的成員還包括所有屬性的名字。

先看 $observe 的使用，基本上相當(dāng)于 $scope 中的 $watch ：

<div ng-controller="TestCtrl">
  <test a="{{ a }}" b c="xxx"></test>
  <button ng-click="a=a+1">修改</button>
</div>

var app = angular.module('Demo', [], angular.noop);

app.directive('test', function(){
  var func = function($element, $attrs){
    console.log($attrs);

    $attrs.$observe('a', function(new_v){
      console.log(new_v);
    });
  }

  return {compile: func,
          restrict: 'E'}
});

app.controller('TestCtrl', function($scope){
  $scope.a = 123;
});

$set 方法的定義是： function(key, value, writeAttr, attrName) { ... } 。

• key 對象的成員名。
• value 需要設(shè)置的值。
• writeAttr 是否同時修改 DOM 節(jié)點的屬性（注意區(qū)別“節(jié)點”與“對象”），默認(rèn)為 true 。
• attrName 實際的屬性名，與“標(biāo)準(zhǔn)化”之后的屬性名有區(qū)別。

<div ng-controller="TestCtrl">
  <test a="1" ys-a="123" ng-click="show(1)">這里</test>
</div>

var app = angular.module('Demo', [], angular.noop);

app.directive('test', function(){
  var func = function($element, $attrs){
    $attrs.$set('b', 'ooo');
    $attrs.$set('a-b', '11');
    $attrs.$set('c-d', '11', true, 'c_d');
    console.log($attrs);
  }

  return {compile: func,
          restrict: 'E'}
});

app.controller('TestCtrl', function($scope){
  $scope.show = function(v){console.log(v);}
});

從例子中可以看到，原始的節(jié)點屬性值對，放到對象中之后，名字一定是“標(biāo)準(zhǔn)化”之后的。但是手動 $set 的新屬性，不會自動做標(biāo)準(zhǔn)化處理。