<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. CI 框架去掉url 中index.php的方法

    1 修改 apache 的 httpd.conf 文件 #LoadModule rewrite_module modules/mod_rewrite.so 去掉前面的# 2 找到 你程序目录下的 .h ...

  2. 原生DOM探究 -- NodeList v.s. HTMLCollection

    涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集 ...

  3. Android源码下载并绑定到Eclipse中

    在Windows下,通过SDK Manager.exe更新下载的Android,是不带源码的,我们开发开发起来不是很方便: 其实Android的源代码是可以下载的,其源代码入在http://andro ...

  4. Could not find acceptable representation

    引起的原因:    由于设置了@ResponseBody,要把对象转换成json格式,缺少转换依赖的jar包,故此错. 解决办法: <dependency> <groupId> ...

  5. zepto - slice

    var ss = ['1', '2', '3', '4', '5', '6']; console.log(ss.slice(2,4));

  6. JAVA和C# 3DES加密解密

    最近 一个项目.net 要调用JAVA的WEB SERVICE,数据采用3DES加密,涉及到两种语言3DES一致性的问题, 下面分享一下, 这里的KEY采用Base64编码,便用分发,因为Java的B ...

  7. Java知多少（107）几个重要的java数据库访问类和接口

    编写访问数据库的Java程序还需要几个重要的类和接口. DriverManager类 DriverManager类处理驱动程序的加载和建立新数据库连接.DriverManager是java.sql包中 ...

  8. 同时支持控制台和MFC窗口程序的APP

    BOOL CMyApp::InitInstance() { if ( m_bShowGui==FALSE ) { FILE *stream = NULL; AllocConsole(); // 开辟控 ...

  9. MySQL慢日志监控脚本实例剖析

    公司线上的 MySQL 慢日志,之前一直没有做好监控.趁着上周空闲,我就把监控脚本写了下,今天特地把代码发出来与51博友分享一下. 针对脚本的注解和整体构思,我会放到脚本之后为大家详解. 1 2 3 ...

  10. install keepalived on RedHat/CentOS to provide IP failover for web cluster

    Contents [hide]  1 Introduction 2 Our Sample Setup 3 Install Keepalived 4 Install Kernel Headers 5 C ...