AngularJS学习笔记

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); 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>