在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数。
写法:
link: function(scope, element, attrs){ //在这里操作DOM }
如果指令使用了require选项,那么链接函数会有第四个参数,代表控制器或者所依赖的指令的控制器。
// require 'meController' link: function(scope, element, attrs, meController){ //在这里操作DOM, 可以访问requires指定的控制器 }
链接函数之所以能够在指令中操作DOM,就是因为传入的这几个参数:scope、element、attrs
scope:即与指令元素相关联的当前作用域,可以用来注册监听器:scope.$watch()
element:即当前指令对应的元素,使用它可以操作该元素及其子元素。例如<span my-directive></span>,这个span就是指令 my-directive所使用的元素。
attrs:由当前元素的属性组成的对象。
下面看一个例子,来自官方文档的示例。
我们要实现一个时钟,根据给定的时间格式显示当前的时间,而且每隔一秒要更新一次时间。
首先在控制器中初始化一个时间格式:
controller('Controller', ['$scope', function($scope) { $scope.format = 'M/d/yy h:mm:ss a'; }])
对于时间格式,显然我们要引入$filter服务。
对于”每隔一秒“进行某些操作,显然要引入$interval服务。
为了测试程序,我们还引入$log服务以便在浏览器中观察输出。
所以自定义的指令需要写成这样:
directive('myClock', ['$interval', '$filter', '$log', function($interval, $filter,$log)
这个myClock指令将会被注入$interval、$filter、$log服务。
刷新时间显示,也就是要求我们在指令中操作DOM,输出时间:
function updateTime() { element.text($filter('date')(new Date(), interFormat)); }
$filter方法的使用:
$filter('date')(date, format, timezone)
参考https://code.angularjs.org/1.3.16/docs/api/ng/filter/date
每隔一秒刷新显示:
$interval( function() { updateTime(); }, 1000 );
完整代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="../lib/angular-1.3.16/angular.min.js"></script> <script src=""></script> <title></title> <script language="JavaScript"> angular.module('docsTimeDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.format = 'M/d/yy h:mm:ss a'; }]) .directive('myClock', ['$interval', '$filter', '$log', function($interval, $filter,$log) { return { scope:{ myFormat:'=' }, link: function(scope, element, attrs) { function updateTime() { element.text($filter('date')(new Date(), scope.myFormat)); } updateTime(); $interval(function() { updateTime(); }, 1000); } }; }]); </script> </head> <body ng-app="docsTimeDirective"> <div ng-controller="Controller"> 时间格式: <input ng-model="format"> <hr/> 当前时间: <span my-clock my-format="format"></span> </div> </body> </html>