AngularJS 属性值类型的自定义
2018-07-26 17:15 更新
官方代码中的 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 来处理:
<div ng-controller="TestCtrl"> <p color="color">有颜色的文本</p> <p color="'blue'">有颜色的文本</p> </div> <script type="text/javascript"> var app = angular.module('Demo', [], angular.noop); app.directive('color', function(){ var link = function($scope, $element, $attrs){ $scope.$watch($attrs.color, function(new_v){ $element.css('color', new_v); }); } return link; }); app.controller('TestCtrl', function($scope){ $scope.color = 'red'; }); angular.bootstrap(document, ['Demo']); </script>
以上内容是否对您有帮助:
更多建议: