1.背景介绍
directive( )方法可以接受两个参数:
1. name(字符串)指令的名字,用来在视图中引用特定的指令。
2. factory_function(函数) 这个函数返回一个对象,其中定义了指令的全部行为。 $compile服务利用这个方法返回的对 象,在DOM调用指令时来构造指令的行为。
angular.application('myApp', [])
.directive('myDirective', function() {
//一个指令定义对象
return {
//通过设置项来定义指令,在这里进行覆写
};
});
为了避免与未来的HTML标准冲突,给自定义的指令加入前缀来代表自定义的 命名空间。AngularJS本身已经使用了 ng-前缀,所以可以选择除此以外的名字。 在例子中我们使用 my-前缀(比如 my-derictive)。当模板在上面代码中返回时,你可以把以下的属性列表应用于指令定义返回的对象
restrict(字符串)
restrict是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默 认AngularJS认为 restrict的值是 A,即以属性的形式来进行声明。
可选值如下:
restrict值可以是以下几种:
E作为元素名使用
A作为属性使用
C作为类名使用
M作为注释使用
template(字符串或函数)
template参数是可选的,必须被设置为以下两种形式之一:
一个可以接受两个参数的函数,参数为 tElement和 tAttrs,并返回一个代表模板的字符
串。
templateUrl(字符串或函数)。templateUrl是可选的参数,可以是以下类型:
一个代表外部HTML文件路径的字符串;
指令中的scope
directive默认能共享父 scope中定义的属性,例如在模版中直接使用父 scope中的对象和属性。
通常使用这种直接共享的方式可以实现一些简单的 directive功能。但是当要创建一个可以重复使用的directive的时候,
就不能依赖于父scope了,因为在不同的地方使用directive对应的父scope不一样。所以需要一个隔离的scope,我们可以向
下面这样来定义我们的scope。
scope = false
在指令模板中可以直接使用父作用域中的变量,函数。指令继承了父作用域的一切属性和方法,这也使得在指令的模板中我们可以使用这些属性和方法。
将scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中
scope = true
当把scope属性设置为true时,表明我们创建的指令要创建一个新的作用域,这个作用域是继承了父作用域。
scope = {}
指令将创建完全独立的作用域,当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下, 就可以正常工作,不依赖外部环境。指令的这个属性让AngularJS变得最强,它可以构建组建,无论放在哪里都是可以使用。
但是我们使用了隔离的作用域,不代表我们不可以使用父作用域的属性和方法。我们可以通过向scope的{}中传入特殊的前缀标识符(即prefix),来进行数据的绑定。
@
这是一个单项绑定的前缀标识符
使用方法:在元素中使用属性,好比这样 my-name="{{name}}",注意,属性的名字要用-将两个单词 连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
=
这是一个双向数据绑定前缀标识符
使用方法:在元素中使用属性,好比这样 my-age="age",注意,数据的双向绑定要通过=前缀标识符 实现,所以不可以使用{{}}。
&
这是一个绑定函数方法的前缀标识符
使用方法:在元素中使用属性,好比这样 my-change="changeAge()",注意,属性的名字要用-将多 个个单词连接。
指令中的 controller , compile , link函数
AngularJs的生命周期;分为两个阶段:
第一个阶段是编译阶段:
在编译阶段,AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指 令。每一个指令的模板中都可能含
有另外一个指令,另外一个指令也可能会有自己的模板。当AngularJS调用HTML文档根部的指令时,会遍历其中所有的模板,模板中也可能包
含带有模板的指令.一旦对指令和其中的子模板进行遍历或编译,编译后的模板会返回一个叫做模板函数的函数。我们有机会在指令的模板函
数被返回前,对编译后的DOM树进行修改。
第二个阶段是链接阶段:链接函数来将模板与作用域链接起来;负责设置事件监听器,监视数据变化和实时的操作DOM.链接函数是可选的。
如果定义了编译函数,它会返回链接函数,因此当两个函数都定义了时,编译函数会重载链接函数
指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但链接函数只能在当前内部指令中定义行为,
且无法在指令间复用.link函数可以将指令互相隔离开来,而controller则定义可复用的行为。
1、link和controller的区别:post级别最高几个函数同时存在name为post的name,也就是post最后执行。compile函数最先执行,然后是controller,接着是pre,最后是post。有compile时 link不执行。没有compile时,controller先执行,link后执行。
2、什么时候使用compile: 在编译的阶段,angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中,有可能一层套着一层,一直延深处遍历。一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这个函数没被返回(return)之前我们可以对编译后的DOM树进行修改。通常情况下,如果设置了compile函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。本质上,当我们设置了link选项,实际上是创建了一个postLink() 链接函数,以便compile() 函数可以定义链接函数。编译函数(compile)负责对模板DOM进行转换。链接函数(link)负责将作用域和DOM进行链接。
3、prlority:优先权,权重高的指令先执行