正文
angular 指令——时钟范例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<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>
