<html> <head> <meta charset='utf-8'> <title>模块化</title> <script type="text/javascript" src='http://www.runoob.com/try/angularjs/1.2.5/angular.min.js'> </script> <style type="text/css"> .clock{ padding: 10px; margin:0 auto; width: 400px; background: #000; color:#0f0; } </style> <script type="text/javascript"> angular.module("Mclock",[]) .directive("clock",function(){ return { // 限制指令出现的位置： // E：html原素 // A：html属性 // C：css类 // M：html注释 restrict:"E", //决定是否替换原始的DOM对象；true:替换；false:只填充内容 replace:true, //替换的内容 template:"<div class='clock'></div>", //替换clock标签的内容 //负责操纵Dom对象；scope：指令对应的scoped对象；element：指令绑定的DOM对象,attrs：属性集 link:function(scope,element,attrs){ setInterval(function(){ //获取当前时间 var t=new Date(); element.text(t.toString()); },1000) } } }) </script> </head> <body ng-app="Mclock"> <clock></clock> </body> </html>