18.4. 属性值类型的自定义


    官方代码中的 ng-show 等算是我说的这种类型。使用时主要是在节点加添加一个属性值以附加额外的功能。看一个简单的例子：

    1.   <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.  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);
      10
      11   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   });
      19
      20   app.controller('TestCtrl', function($scope){
      21     $scope.color = 'red';
      22   });
      23
      24   angular.bootstrap(document, ['Demo']);
      25   </script>