首页 > 网站 > WEB开发 > 正文

(四)Angularjs

2024-04-27 14:12:04
字体:
来源:转载
供稿:网友

(四)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 });


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表