<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 指令——时钟范例的更多相关文章

  1. angular指令深度学习篇

    angular指令深度学习-过滤器 limitTo ... <body ng-app="app" > <div ng-controller="myCtr ...

  2. Angular指令渗透式理解

    通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...

  3. Angular4 后台管理系统搭建（9） - 用自定义angular指令，实现在服务端验证

    最近这段时间发现,北京这用angular4 或 angular2的公司很少.几乎是没有.很担心自己是不是把精力放到了不应该的地方.白耽误了时间.但是随着我对新版angular框架理解的加深.个人感觉a ...

  4. angular指令之complie和link不得不说的故事

    angular指令比较晦涩难懂的就是complie和link字段了,什么时候该用complie?什么时候该用link?总是很难分别清楚.当理解了指令的真正编译原理的时候,就会发现这相当的简单. ng怎 ...

  5. 【转】angular指令入坑

    独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...

  6. angular 指令作用域 scope

    转载自:https://segmentfault.com/a/1190000002773689 下面我们就来详细分析一下指令的作用域. 在这之前希望你对AngularJS的Directive有一定的了 ...

  7. Angular指令1

    Angular的指令 也就是directive,其实就是一WebComponent,以前端的眼光来看,好象很复杂,但是以后端的眼光来看,还是非常简单的.其实就是一个中等水平的类. var myModu ...

  8. angular指令大全

    这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 ...

  9. 初学angular-简单的angular指令

    实现一个简单的input清空内容,且清空对应ngModel 前台部分 <html ng-app="hpapp"> <head> <meta chars ...

随机推荐

  1. java攻城狮之路(Android篇)--BroadcastReceiver&Service

    四大组件:activity 显示. contentProvider 对外暴露自己的数据给其他的应用程序.BroadcastReceiver 广播接收者,必须指定要接收的广播类型.必须明确的指定acti ...

  2. 安卓模拟器bluestack 换imei

    有好多种方法,下面介绍2种   第一种方法   通过靠谱助手设置,非常简单.   第二种方法   1.解压 root_20121221文件夹,将Root.fs 覆盖到 win7路径:C:\Progra ...

  3. SNF开发平台WinForm之十四-站内发送系统信息-SNF快速开发平台3.3-Spring.Net.Framework

    1运行效果: 2开发实现: .组装站内信息发送实体对象. SNFService SNFService = new SNFService(); if (this.ucUser.SelectedIds ! ...

  4. linux常用

    一.命令 1.查指令,man, info, /usr/share/doc/: 2.文档,nano lyp.txt: 3.谁在线,who: 4.数据同步写入硬盘,sync: 5.显示档案,ls: 6.目 ...

  5. vmware workstation11+centos7+lnmp一键安装包 环境搭建

    vmware workstation11 1.下载:http://pan.baidu.com/s/1gecipOJ 2.安装:直接下一步. centos7 1.下载:网易镜像 http://mirro ...

  6. NGUI 界面自适应

    关于 NGUI 的界面自动适应不同的手机分辨率,网上已经够多的了.如果你点进了这个网页,推荐一下这一篇吧: http://www.xuanyusong.com/archives/2536 下面是我自己 ...

  7. 编写高质量JS代码的68个有效方法（十）

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. Java 集合系列15之 Set架构

    前面,我们已经系统的对List和Map进行了学习.接下来,我们开始可以学习Set.相信经过Map的了解之后,学习Set会容易很多.毕竟,Set的实现类都是基于Map来实现的(HashSet是通过Has ...

  9. tiny4412的中断资源连接关系示意图

    在tiny4412的设备树中可以发现,中断资源是以树的形式呈现的,下面是我画的一张图,大致描述了tiny4412上中断资源的连接关系. 可以到http://pan.baidu.com/s/1ge0sz ...

  10. javascript之IE版本检测

    近年来随着操作系统的升级以及各种新技术的开发普及,抛弃低版本IE已经是大势所趋,这对于前端人员来时是个好消息,可以不用花费太多的时间来做低版本的兼容,很多站点采用给予低版本IE以提示的方式(恩,很友好 ...