1.Directive的五个实例知道driective作用、其中字段restrict、template、 replace、transclude、link用法

参考文章链接地址:http://damoqiongqiu.iteye.com/blog/1917971

1.指令(directive)的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 ,如同博客中的自定义的<hello>标签

2.directive中几个属性的介绍:

①restrict:表明指令的声明方式,选项E(元素Element),A(属性Attribute),C(样式类Class),M(注释Comment)

②template/templateUrl:替换自定义元素的html的标签及内容

③replace:true/false :决定自定义标签的显示及隐藏

④transclude:true决定自定义标签内子标签的内容的显示处理,此时<hello>标签里的内容保持不变

⑤link:一些事件需要绑定到某个元素上,那么你需要提供一个link函数


http://www.cnblogs.com/jimmychange/p/3498906.html

compile:  在directive中如果需要对DOM元素进行处理,基本都是在这个函数中进行。仔细看这个函数,compile并不能访问scope,

link:此函数的主要作用就是对DOM和scope做数据绑定。和compile不同,在这个函数中,已经可以访问scope了。
template和templateUrl:用于指定directive对应的模板,前者直接使用字符串定义模板,而后者则通过url链接外部模板文件。在模板中可以使用对应controller或者rootScope中的scope,当然也有例外,具体请看关于scope的解释。
replace:指定是否使用模板替换directive作用的DOM元素。
priority:指定优先级,angular在处理directive时,会将页面出现的所有directive按优先级排序,一般这个数值都是不指定的。
controller:directive对应的controller,通常用于directive之间的通信。在这个函数中,所有绑定到this上的变量,其他的directive都能通过使用require来进行访问。
require:通过指定某个directive的名字,来访问其对应的controller。其中以?作为前缀时,如果找不到此directive将报错,而以^为前缀,将会在父元素进行递归查找,可以使用数组来引入多个directive,如['directive1','directive2','directive3']
scope:用于指定当前directive所对应的scope,不同的取值之间的影响非常大。

1. false:此时directive与父元素共享scope
2. true:此时directive有自己的scope,该scope继承父元素所对应的scope
3. isolate:directive有自己的scope,该scope不会继承自父元素对应的scope,但是仍然可以通过scope.$parent访问父节点的scope。这不是一个推荐的做法,因为这样就对父元素进行了限制,影响了directive的使用范围。如果想在父子元素之间共享数据,可以明确指定那些元素需要父子之间共享。方法共有三种:
使用@将父级scope中的属性绑定到本地scope中,单向绑定,这个值总是字符串,在template中需要使用{{}}
使用=同上,只不过这里是双向绑定,在template中可以直接给出父级scope的属性名称
使用&用于倒入函数或者表达式

transclude:用于控制是否要将该directive的子元素添加到模板中ng-tranclude指定的元素之下


2.Angularjs指令directive之require和了$parsers这个属性和$setValidity()方法

http://hudeyong926.iteye.com/blog/2074238

在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.eg:require:’ngModel’引用内置指令require: '?^common'引用自定义指令

引用内置指令

angular.module('myApp')
.directive('spoint', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var fibonacci = [1, 2, 3, 5, 8, 13, 20, 40, 80];
ctrl.$parsers.unshift(function(viewValue) {
if (fibonacci.indexOf(parseInt(viewValue)) >= 0) {
ctrl.$setValidity('fibonacci', true);
return viewValue;
} else {
ctrl.$setValidity('fibonacci', false);
return undefined;
}
});
}
};
});  

这里值得注意的是directive里link方法的第四个参数,我们在require里定义了ngModel 所以这里它是一个NgModelController

NgModelController是用来为ng-model提供了一组API。通过他我们可以他来确定ngModel的 值是否是合法的。 我们这里只介绍其中和表单验证有关的几个方法和属性。

上面的例子中我们用到了$parsers这个属性和$setValidity()这个方法。 $parsers里保存了一组function, 每当DOM里数据变化的时候, 这组function会被一次调用。这里给了我们机会在用户修改了DOM里值的时候, 去对新输入的值做校验。

3.Directive的书写格式和参数说明,controler,complie,link的区别Scope:定义映射关系

   参考文章链接地址 http://blog.51yip.com/jsjquery/1607.html

controller,link,compile有什么不同

运行结果:Hello 1111 22222 44444 55555 !

由结果可以看出来,controller先运行,compile后运行,link不运行。

将上例中的compile注释掉

运行结果:

  1. Hello 1111 22222 33333 !

由结果可以看出来,controller先运行,link后运行,link和compile不兼容。

Angularjs之directive指令学习笔记(二)的更多相关文章

  1. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  2. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  3. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  4. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  5. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  6. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  7. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  8. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

  9. Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

随机推荐

  1. ArcGIS API for Silverlight 使用GeometryService求解线与线的交点

    ///画线 void btn_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Button btn = sender as B ...

  2. docker学习2-安装实践

    windows上安装docker后,默认自动在后台运行,右下角有docker图标,鼠标右键点击出现菜单 可以查看docker版本,对一些基本项进行设置如下: 安装及具体操作参见官方文档: https: ...

  3. 机器学习 —— 概率图模型(Homework: CRF Learning)

    概率图模型的作业越往后变得越来越有趣了.当然,难度也是指数级别的上涨啊,以至于我用了两个周末才完成秋名山神秘车牌的寻找,啊不,CRF模型的训练. 条件随机场是一种强大的PGM,其可以对各种特征进行建模 ...

  4. MySQL用命令行导出数据库

    MySQL命令行导出数据库:首先进入cmd然后:1. cd C:\Program Files (x86)\MySQL\MySQL Server 5.1\bin2. mysqldump -uroot - ...

  5. [LeetCode#247] Strobogrammatic Number II

    Problem: A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked a ...

  6. C#代码分层的好处

    1.对于复杂的系统,分层让代码结构清晰,便于开发人员对系统进行整体的理解.把握.如果代码没有分层,把逻辑都写在一个方法里面的代码就好比是一本没有目录的文档,要找出其中某一节都要对全文遍览一次. 2.基 ...

  7. Delphi TFindDialog TReplaceDialog对话框在Memo中的使用

    Delphi TFindDialog TReplaceDialog对话框的使用 下载地址1: http://download.csdn.net/detail/teststudio/6408383   ...

  8. Linux系统编程(37)—— socket编程之原始套接字

    原始套接字的特点 原始套接字(SOCK_RAW)可以用来自行组装IP数据包,然后将数据包发送到其他终端.也就是说原始套接字是基于IP数据包的编程(SOCK_PACKET是基于数据链路层的编程).另外, ...

  9. linux 安装与启动nginx

    linux系统为Centos 64位 一.去http://nginx.org/download/上下载相应的版本下载nginx-1.8.0.tar.gz(注:还有更高版本的). 二.解压 tar -z ...

  10. ArcGIS API for JavaScript 4.2学习笔记[11] 官方第五章Popups(弹窗)概览与解释

    直接跳过第三第四章了,第三章Layer和第四章可视化,怎么说呢,Layer是组织数据的,是Map的属性之一.可视化属于符号化编程,暂时不看. 第五章是对数据.结果的显示,类似于alert()..NET ...