你的位置:首页 > Java教程

[Java教程](四)Angularjs


自定义指令编写时钟

模板

<!-- 模板文件 -->
<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 });