### 18.9. Attributes的細節 節點屬性被包裝之后會傳給 `compile` 和 `link` 函數。從這個操作中，我們可以得到節點的引用，可以操作節點屬性，也可以為節點屬性注冊偵聽事件。 <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_ 屬性所在的節點。_$attr_ 所有的屬性值（類型是對象）。_$normalize_ 一個名字標準化的工具函數，可以把 `ng-click` 變成 `ngClick` 。_$observe_ 為屬性注冊偵聽器的函數。_$set_ 設置對象屬性，及節點屬性的工具。 除了上面這些成員，對象的成員還包括所有屬性的名字。 先看 _$observe_ 的使用，基本上相當于 _$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_ 需要設置的值。 - _writeAttr_ 是否同時修改 DOM 節點的屬性（注意區別“節點”與“對象”），默認為 `true` 。 - _attrName_ 實際的屬性名，與“標準化”之后的屬性名有區別。 <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);} }); 從例子中可以看到，原始的節點屬性值對，放到對象中之后，名字一定是“標準化”之后的。但是手動 `$set` 的新屬性，不會自動做標準化處理。