angular.module('time', []) .controller("Ctrl2", function($scope) { $scope.format = 'M/d/yy h:mm:ss a'; }) // Register the 'myCurrentTime' directive factory method. // We inject $timeout and dateFilter service since the factory method is DI. .directive('myCurrentTime', function($timeout, dateFilter) { // return the directive link function. (compile function not needed) return function(scope, element, attrs) { var format, // date format timeoutId; // timeoutId, so that we can cancel the time updates // used to update the UI function updateTime() { element.text(dateFilter(new Date(), format)); } // watch the expression, and update the UI on change. scope.$watch(attrs.myCurrentTime, function(value) { format = value; updateTime(); }); // schedule update in one second function updateLater() { // save the timeoutId for canceling timeoutId = $timeout(function() { updateTime(); // update DOM updateLater(); // schedule another update }, 1000); } // listen on DOM destroy (removal) event, and cancel the next UI update // to prevent updating time ofter the DOM element was removed. element.bind('$destroy', function() { $timeout.cancel(timeoutId); }); updateLater(); // kick off the UI update process. } });
然后index.html:
<!doctype html> <html lang="en" ng-app="time"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="https://www.jb51.net/bootstrap/css/bootstrap.css" > <script src="https://www.jb51.net/angularjs/angular.js"></script> <script src="https://www.jb51.net/mydirective.js"></script> </head> <body> <div ng-controller="Ctrl2"> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span> </div> </body> </html>
注意：ng-app="time"一定要指明是time。否则无法关联起来。
分析如下：
给span制定了一个属性，绑定到了scope里面的format
<span my-current-time="format"></span>
定义了输入框，绑定了scope里面的format
<input ng-model="format">
定义了controller -- Ctrl2， 然后引入了scope，定义了变量format
定义了指令myCurrentTime ， 然后就是和html里面的my-current-time="format"对应，html里面用破折号连起来，指令就是驼峰样子的myCurrentTime（首字母小写）
link函数的三个参数，以及attrs的使用：
return function(scope, element, attrs) { scope.$watch(attrs.myCurrentTime, function(value) {
可看到，myCurrentTime既是指令名字，然后在这个span元素里面又是属性名，他的值是format的真实值。
用firebug看到：
指令当成属性，不会有replace起作用的时候，不会被替换也不会插入，就是一个属性，后面的日期值，其实是updateTime()函数直接写elem.text的效果。
此处指令当做属性的作用就是扩展当前元素的功能。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: