<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. 优化IIS7.5支持10万个同时请求windows 2008 R2

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. -

  2. Using the Cordova Camera API

    使用ionic开发一款android或ios应用,估计少不了使用到Camera API,这里记录下使用过程. 创建空的ionic应用 ionic start myTabs tabs 通过cd demo ...

  3. 【Android】设备标识

    Android系统以及设备都有很多的“标识”号,比如常见的IMEI,SerizalNumber,UUID等概念,但是这些都存在一定程度上的不可靠性,到底如何标记一台Android设备? 文章内容多来自 ...

  4. Java -- 获取当前日期、当月月初日期、月末日期

    Learn From:http://blog.csdn.net/sunhuwh/article/details/39161323 public class CalendarTest { public ...

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

    [20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  6. rabbitmq使用dead letter机制来进行retry

    首先建立 工作exchange和工作queue,指定工作队列的x-dead-letter-exchange到重试exchenge var workQueueArgs = new Dictionary& ...

  7. [转载]浅谈组策略设置IE受信任站点

    在企业中,通常会有一些业务系统,要求必须加入到客户端IE受信任站点,才能完全正常运行访问,在没有域的情况下,可能要通过管理员手动设置,或者通过其它网络推送方法来设置. 有了域之后,这项工作就可以很好的 ...

  8. C#语法糖之Cookies操作类 asp.net

    用法: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&quo ...

  9. 注意力机制（Attention Mechanism）在自然语言处理中的应用

    注意力机制(Attention Mechanism)在自然语言处理中的应用 近年来,深度学习的研究越来越深入,在各个领域也都获得了不少突破性的进展.基于注意力(attention)机制的神经网络成为了 ...

  10. 奥特曼小分队之四（Work Breakdown Structure）

    写在前面的话:游戏介绍http://www.cnblogs.com/atmxfd/p/5415107.html 需求 我们的游戏是一款基于局域网的游戏,用户只需将服务端和客户端置于同一局域网下即可使用 ...