<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. CRUD Operations In ASP.NET MVC 5 Using ADO.NET

    Background After awesome response of an published by me in the year 2013: Insert, Update, Delete In ...

  2. 十六、【适合中小企业的.Net轻量级开源框架】EnterpriseFrameWork框架核心类库之单点登录SSO

    回<[开源]EnterpriseFrameWork框架系列文章索引> EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U 单点登录(Single Sign ...

  3. Oracle 物化视图 说明

    一．    物化视图概述 Oracle的物化视图是包括一个查询结果的数据库对像,它是远程数据的的本地副本,或者用来生成基于数据表求和的汇总表.物化视图存储基于远程表的数据,也可以称为快照. 物化视图可 ...

  4. 图文详解远程部署ASP.NET MVC 5项目 [转载]

    话外篇: 由于感觉自己的机器比较慢,配置不好,所以最近想把之前的项目部署到实验室的服务器上,但是由于常不在实验室,所以在想能不能远程部署.因此今天专门研究了一下具体的过程,下面和大家分享一下.本人新手 ...

  5. zepto - toggle

    <input type="text" value="123456789" /> <div id="too_long"> ...

  6. UnWind Segue

    iOS 6 和 Xcode 4.5 中添加了一个新特性叫做“Unwind Segue”. 使用Unwind Segue,可以方便的在Navigation Controller的Controllers之 ...

  7. Rendering Path

    Rendering Path:渲染路径 设置:1.Player Setting,2.Camera(会覆盖PlayerSetting中的设置) 选择:根据渲染内容和目标平台来选择合适的Rendering ...

  8. specify a file path to store the seed

    此问题是由于你的php没有开启open-ssl模块功能引起的. 所以解决方案为开启php的open_ssl模块功能. 开启open_ssl的方式很简单,打开php.ini文件,将行头的分号删除即可. ...

  9. Network - Tcpdump

    Tcpdump homepage - tcpdump wiki - tcpdump 常用格式 tcpdump -i eth<网卡号> port <端口号> -s0 -w 示例: ...

  10. 免费下载！Twitter Bootstrap V3 矢量界面素材

    Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...