angularjs中内置了很多指令(Directive),常用的如ng-repeat、ng-class等等,我们也可以自己定义指令,而且在项目中是非常普遍的。 我们经常进行很多DOM操作,如点击事件,表单验证事件等等,angular不建议我们将这些操作放在控制层,也即Contrller处,而是应该在指令处进行DOM的操作。也算是为了减轻控制层的负担吧。

2.知识剖析

directive( )模块解析 directive( )方法可以接受两个参数:

1. name (字符串) 指令的名字,用来在视图中引用特定的指令。

2. factory_function (函数)

这个函数返回一个对象,其中定义了指令的全部行为。 $compile 服务利用这个方法返回的对 象,在DOM调用指令时来构造指令的行为。当AngularJS启动应用时,它会把第一个参数当作一个字符串,并以此字符串为名来注册第 二个参数返回的对象。

AngularJS编译器会解析主HTML的DOM中的元素、属性、注释和CSS类名 中使用了这个名字的地方,并在这些地方引用对应的指令。当它找到某个已知的指令时,就会在 页面中插入指令所对应的DOM元素。

restrict(字符串)

该属性定义了属性在视图上的使用方式,默认值是A。备选值有:

A:即Attribute,以属性的方式定义

E:即Element,以元素的方式定义

C:即Class,以类的方式定义

M:即Comment,以注释的方式定义

priority (数值型)

顾名思义,即定义指令的优先级,大部分情况下都不会去定义它,即默认为0。定义它可以让它优先于其他指令运行。ng-repeat指令则定义了优先级为1000。

terminal (布尔型)

用于告诉angular,优先级比该指令低的其他指令都停止执行,不过同级的指令依旧会执行。 使用了terminal参数的例子是ngView和ngIf。ngIf的优先级略高于ngView,如果ngIf的表达式值为true,ngView就可以被正常执行,但如果ngIf表达式的值为false,由于ngView的优先 级较低就不会被执行。

template (字符串或者函数)

该属性可以用于定义嵌入到指令中的HTML文本。

该属性可以是一个HTML字符串,也可以是一个函数。

templateUrl (字符串或函数)

实际中,我们不会使用template,因为我们HTML字符串不会像上面那么简单只有几行代码,因此我们会将它放在一个模板文件中。 该属性的值同样也可以是个字符串或者函数。

如果是字符串,则为模板的路径。 如果是函数,则该函数也会接受两个参数,tElement和tAttrs,函数中会返回模板文件的路径。

replace (布尔型)

该属性是个可选值,如果定义了该属性,则值必须为true,因为默认值为false。 当为默认值false时,上述的HTML模板将会作为子元素插入到指令的元素内部。 当值为true时,HTML模板将会替换掉指令元素。

scope (布尔型或对象)

默认情况下,指令是被赋予允许访问父DOM元素对应作用域的能力,此时scope即为即默认值,即为false。 当该值为false时,将会直接访问父元素的作用域,此时指令中对作用域中元素的修改也会直接作用在父元素的作用域中。 当该值为true时,则会继承父元素作用域,并创建一个新的作用域对象。

指令定义中scope属性最强大功能应该是定义隔离作用域。我们可以将scope的值定义为一个对象,如空对象{},此时指令的作用域将会完全独立于外界。

将scope定义为空对象也不是那么常见的,我们可以将它和指令外部的作用域进行数据绑定。

transclude (布尔值)。

该属性默认值为false,一旦定义则必须设置为true。 使用它,我们可以将视图元素嵌入到我们指定的地方进去。嵌入通常用来创建可复用的组件,典型的例子是模态对话框或导航栏。

controller (字符串或函数)

若该属性的值是字符串,则会以该字符串值去应用中查找该控制器。

controllerAs (字符串)

用于设置控制器的别名

compile (对象或函数)

angular应用在启动后会经历两个阶段,一个是编译,一个是链接。 编译阶段会遍历整个HTML文档,编译各个指令和模板,一旦编译阶段完成,便会调用编译函数,编译函数的参数包含有访问指令声明所在的元素(tElemente)及该元素其他属性(tAttrs)的方法。

link

如果有require时,可以将会有第四个参数,代表控制器或者所依赖的指 令的控制器

link: function(scope, element, attrs, SomeController) { // 在这里操作DOM,可以访问required指定的控制器 }

3.常见问题

angular js自定义指令 directive 如何使用?

4.解决方案

5.编码实战

6.扩展思考

指令作用

它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive,我们可以封装很多公共指令,比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。

7.参考文献

参考一:angularjs指令的用法

参考二:angular自定义指令详解

8.更多讨论

感谢观看

BY : 郭晨阳

语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值。如果省略,则该函数不返回值。 用 return 语句来终止一个函数的执行,并返回 expression 的值。如果 expression 被省略, 或在函数内没有 return 语句被执行,则把值 undefined 赋给调用当前函数的表达式。