Attributes的细节

### 18.9. Attributes的细节 节点属性被包装之后会传给 `compile` 和 `link` 函数。从这个操作中，我们可以得到节点的引用，可以操作节点属性，也可以为节点属性注册侦听事件。 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_ ： 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_ 实际的属性名，与“标准化”之后的属性名有区别。 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` 的新属性，不会自动做标准化处理。