angular 指令——时钟范例
2024-08-26 07:51:18
<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>
最新文章
- GeoServer中WMS、WFS的请求规范
- mac下剪切文件或文件夹
- Linux 搭建Nexus
- javascript属性标签
- JAVA 列表排序
- Java Hour 44 Hibernate
- C Primer Plus(第五版)8
- Hibernate的简单示例
- struts2基于Convention插件的约定映射使用
- MVC-@html.ActionLink的几种参数格式
- CocoaPods报错:The dependency `xxx` is not used in any concrete target
- The Meta-Object System
- 记录python接口自动化测试--从excel中读取params参数传入requests请求不生效问题的解决过程(第七目)
- 解决Visual Studio 2017隐藏“高级保存选项”命令
- HEX SDUT 3896 17年山东省赛D题
- BZOJ5254 : [Fjwc2018]红绿灯
- Vue学习5:条件渲染
- 【环境配置】配置jdk
- 阿里云kubernetes被minerd挖矿入侵
- python中time模块和datetime模块