<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. HTML5[4]：去除不必要的标签，完全使用css实现样式

    1)div.span的区别,div默认是沾满一行,span默认是inline 2)去除font之类的标签

  2. VS2010打包，遇到的一些问题和解决办法

    我用的VS2010,教程很多,我就不一一介绍了,我把我自己遇到的一些问题向大家说一下: 1 可能我比较笨吧,没有理解网上很多教程的意思,直接把图片的后缀名改了,导致添加快捷方式图标的时候出现这种情况 ...

  3. bootstrap插件学习-bootstrap.scrollspy.js

    先看bootstrap.dropdown.js的结构 function ScrollSpy(){} //构造函数 ScrollSpy.prototype = {} //构造器的原型 $.fn.scro ...

  4. Hya.io – 基于 Web 的数字音频工作站

    Hya.io 是基于 Web 的音频应用程序,通过 Web MIDI ,音频合成器,音序以及大量的插件来支持硬件 MIDI .您可以添加插件到工作区,将其连接到路由音频,进行播放和实验. HYA 支持 ...

  5. [git]修改commit

    git commit --amend 修改上一个的commit信息. git reset commit_id 修改commit,同时改变commit历史,可用于合并commit. git revert ...

  6. IOS7中自动计算label的宽度和高度的方法

    #import "ViewController.h" @implementation ViewController - (void)viewDidLoad { [super vie ...

  7. 使用Spark分析拉勾网招聘信息(二): 获取数据

    要获取什么样的数据? 我们要获取的数据,是指那些公开的,可以轻易地获取地数据.如果你有完整的数据集,肯定是极好的,但一般都很难通过还算正当的方式轻易获取.单就本系列文章要研究的实时招聘信息来讲,能获取 ...

  8. SpringMVC从Controller跳转到另一个Controller（转）

    http://blog.csdn.net/jackpk/article/details/44117603 [PK亲测] 能正常跳转的写法如下: return "forward:aaaa/bb ...

  9. .net C# 对虚拟目录IIS的操作

    一.查看虚拟目录是否存在 private bool IsExitesVirtualDir(string virtualdirname) {    bool exited =false;    Dire ...

  10. Apache log4net™ 手册——概述【翻译】

    原文地址 本文内容 概述 框架 日志(Loggers)和追加器(Appenders) 日志层次(Logger hierarchy) 追加器(Appenders) 筛选(Filters) 布局(Layo ...