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>
angular 指令——时钟范例的更多相关文章
- angular指令深度学习篇
angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...
- Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
- Angular4 后台管理系统搭建（9） - 用自定义angular指令，实现在服务端验证
最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...
- angular指令之complie和link不得不说的故事
angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...
- 【转】angular指令入坑
独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...
- angular 指令作用域 scope
转载自:https://segmentfault.com/a/1190000002773689 下面我们就来详细分析一下指令的作用域. 在这之前希望你对AngularJS的Directive有一定的了 ...
- Angular指令1
Angular的指令 也就是directive,其实就是一WebComponent,以前端的眼光来看,好象很复杂,但是以后端的眼光来看,还是非常简单的.其实就是一个中等水平的类. var myModu ...
- angular指令大全
这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...
- 初学angular-简单的angular指令
实现一个简单的input清空内容,且清空对应ngModel 前台部分 <html ng-app="hpapp"> <head> <meta chars ...
随机推荐
- 内容营销三大实用法则（内含干货）-同样可运用在EDM数据营销中
内容为王的时代,注重内容的发展才能屹立于互联网的浪潮之中.一个优秀内容在搜寻引擎优化.用户互动,促进销售等方面都扮演重要的角色,博主在这方面深有体会,但是很多人往往走向事情的反面,不注重实际的内容,而 ...
- 拼音 名字 排序 a-z的比较 （ sortUsingComparator ）
NSMutableArray * array = [NSMutableArrayarrayWithObjects:@"ad",@"az",@"ac&q ...
- 实现TabView(页签)效果
今天花了点时间,设计了一个网页上用的tabview(页签.tabcontrol)效果.个人觉得实现得比较不错,网页元素用得比较少,js代码也比较精练.测试了一下支持IE.FireFox以及chrome ...
- VS2012下安装NuGet
关于NuGet的两篇文章:MSDN上的使用 NuGet 管理项目库,和博客园dudu的程序员,用NuGet管理好你的包包. VS2012下安装NuGet 在工具菜单下选择“扩展和更新”. 选择“联机” ...
- java中产生对象的两种方式
/* * 普通new对象的过程! */ Person pp = new Person(); System.out.println(pp); /* * 利用代用参数的构造器产生对象实例! * 首先获得相 ...
- Java定位CPU使用高问题--转载
原文地址:http://www.cnblogs.com/guoyuqiangf8/p/3545687.html 1.TOP命令,查询消耗CPU高的进程号 PID,并记录下来,按下键盘"H&q ...
- vim编辑器的基本使用
VIM的操作模式 Command Mode 命令模式 Insert Mode 输入模式 Last Line Mode 底行模式 vim abc 如果文件存在 ...
- Web Service常识
1 问题的引出 位于服务器的程序需要在Web页面上显示一个订单列表,它需要访问业务对象服务器上的程序,通过它读取订单列表,业务对象服务器又要访问数据库服务器.当一台计算机上的程序调用另一台计算机上 ...
- UWP开发入门（十六）——常见的内存泄漏的原因
本篇借鉴了同事翔哥的劳动成果,在巨人的肩膀上把稿子又念了一遍. 内存泄漏的概念我这里就不说了,之前<UWP开发入门(十三)——用Diagnostic Tool检查内存泄漏>中提到过,即使有 ...
- HT图形组件设计之道（二）
上一篇我们自定义CPU和内存的展示界面效果,这篇我们将继续采用HT完成一个新任务:实现一个能进行展开和合并切换动作的刀闸控件.对于电力SCADA和工业控制等领域的人机交互界面常需要预定义一堆的行业标准 ...