官方代码中的 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>