（四）Angularjs - 小实例（2）

浏览数：25 / 时间：2015年06月09日

自定义指令编写时钟

模板

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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log src html 文件 it la sp class style log src html 文件 it la sp

相关文章

随机文章

您可能还喜欢

您可能还喜欢