自定义指令编写时钟
模板
<!-- 模板文件 -->
<html>
<!-- 内置的ng-app指令通知编译器启动AngularJS框架-->
<body ng-app="ezstuff">
<!-- 我们自己定义的ez-clock指令通知编译器生成时钟widget-->
<ez-clock></ez-clock>
</body>
<script src="angular.js"></script>
</html>
controller
angular.module("ezstuff",[])//创建模块ezstuff
.directive("ezClock",function(){//在模块上注册指令ezClock的类工厂
return {
restrict : "E",
replace : true,
template : "<div class='clock'></div>",
link : function(scope,element,attrs){
setInterval(function(){
//获取当前时间
var d = new Date();
//element对应引用该指令的DOM对象的jqLite封装
element.text(d.toString());
},1000);
}
}
});