(四)Angularjs - 小实例(2)

自定义指令编写时钟

模板

<!-- 模板文件 -->
<html> <!-- 内置的ng-app指令通知编译器启动AngularJS框架--> <body ng-app="ezstuff"> <!-- 我们自己定义的ez-clock指令通知编译器生成时钟widget--> <ez-clock></ez-clock> </body> <script src="angular.js"></script> </html>

controller

 1 angular.module("ezstuff",[])//创建模块ezstuff

 2     .directive("ezClock",function(){//在模块上注册指令ezClock的类工厂

 3     return {

 4         restrict : "E",

 5         replace : true,

 6         template : "<div class='clock'></div>",

 7         link : function(scope,element,attrs){

 8             setInterval(function(){

 9                 //获取当前时间

10                 var d = new Date();

11 

12                 //element对应引用该指令的DOM对象的jqLite封装

13                 element.text(d.toString());

14             },1000);

15         }

16     }

17 });

 

你可能感兴趣的:(AngularJS)