自定义指令

26. 七月 2016 AngularJS 0

我发现懒惰是促使科技进步的最大动力,因为懒得走,人类发明了汽车飞机等各种东西,还有就是angular,因为人们懒得写那么多的代码,所以angular才能这么流行。

angular的指令着实强大,内置指令可以为我们解决很多问题,但是有一些需求还是需要我们通过创建自定义指令来实现的,毕竟每个人,每个项目的需求都不同,自定义指令允许你通过自己实现元素的行为来拓展html功能,如果你有需要操作DOM的代码,就应该利用自定义指令做到这一点。

1、指令的实现

可以通过在一个Module对象上调用directive()方法实现自定义指令,directive()方法接收一个指令名称最为第一个参数,并接收一个提供函数来返回一个对象,这个对象包含一些必要的指令来构建指令对象,语法:

返回的对象中的指令包含以下几种。

1.2 template 模板

允许你定义插入指令的元素的angularJs模板文本,可以在自定义模板中指定一个根元素,但只能有一个元素,作为所有子元素的根元素,另外如果使用了transclude标识,这个元素中应该包含ng-transclude。

也可以通过使用templateUrl属性来指定谓语服务器上的angular模板的url

1.3 transclude

保留指令中的内容,并且如果元素指令中没有内容,transclude设置为true的时候,则该指令的内部组件可以访问指令以外的作用域,还必须在指令模板内的元素中保留ng-transclude指令。

1.4 restrict

指定该指令是应用于什么范围,是一个html元素还是一个属性还是一个类名等,

restrict可以设置为以下几种  :

  • A:应用为一个属性名
  • E:应用为一个元素名
  • C:应用为一个类名
  • M:应用为注释

这几种也可以混合使用,比如AE、EC等。M 比较少用,改变一个注释没啥意思。

1.5 link函数

指定可以访问该作用域、DOM元素和其他操作元素的链接函数。

link函数接受作用域、元素和与指令相关的属性等参数。可以让你直接在指令中操作DOM元素,语法:

link : function(scope,element,attributes,[controller])

controller 是由require选项指定的控制器。

1.6 独立作用域

可以为当前指令设置独立作用域

1.7 动态引用数据

有时候我们希望吧外部作用域的一些项目任然映射到指令的作用域内。可以使用这些前缀属性名,是局部作用域内的变量在该指令的作用域内可用。

1.先将控制器上的属性进行传递
1. 先将title值进行取出 {{title}} 取出来的值 title = “scope上的值”
2.在指令中引用scope上的值,
1. 先声明一个title属性,用@符号去引用当前指令上的属性

1.7.1 “@”引用字符串

指令和作用域间的交互 声明控制器

挂载scope上的属性

在当前作用域下声明title属性,引用对应的值

1.7.2 “=”引用scope上的属性

= 在局部作用域和指令作用域属性之间创建一个双向的绑定。

注意一点的是在controller作用域中,

例子:

1.7.4 &绑定函数

1.7 replace替换指令

增加replace:true替换原有指令,

74408443

1.9 compile函数

在link函数前执行,编译模板,返回的函数为link函数,如果同时设置了compile 函数和 link函数的话,link函数会失效

2.指令和指令间的交互

指令之间的交互主要依赖两个参数:controller 和  require 。

随后运用指令的交互写一个小DEMO:分组风箱

再来一个我觉得很方便的指令拖拽

 


发表评论

电子邮件地址不会被公开。