### 18.4. 屬性值類型的自定義 官方代碼中的 `ng-show` 等算是我說的這種類型。使用時主要是在節點加添加一個屬性值以附加額外的功能。看一個簡單的例子： <p color="red">有顏色的文本</p> <color color="red">有顏色的文本</color> <script type="text/javascript"> var app = angular.module('Demo', [], angular.noop); app.directive('color', function(){ var link = function($scope, $element, $attrs){ $element.css('color', $attrs.color); } return {link: link, restrict: 'AE'}; }); angular.bootstrap(document, ['Demo']); </script> 我們定義了一個叫 `color` 的指令，可以指定節點文本的顏色。但是這個例子還無法像 `ng-show` 那樣工作的，這個例子只能渲染一次，然后就無法根據變量來重新改變顯示了。要響應變化，我們需要手工使用 `scope` 的 `$watch` 來處理： 1 2 <div ng-controller="TestCtrl"> 3 <p color="color">有顏色的文本</p> 4 <p color="'blue'">有顏色的文本</p> 5 </div> 6 7 <script type="text/javascript"> 8 9 var app = angular.module('Demo', [], angular.noop); 1011 app.directive('color', function(){ 12 var link = function($scope, $element, $attrs){ 13 $scope.$watch($attrs.color, function(new_v){ 14 $element.css('color', new_v); 15 }); 16 } 17 return link; 18 }); 1920 app.controller('TestCtrl', function($scope){ 21 $scope.color = 'red'; 22 }); 2324 angular.bootstrap(document, ['Demo']); 25 </script>