Angular.js指令学习中一些重要属性的用法教程
Angular指令
创新互联长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为东方企业提供专业的网站设计、网站建设,东方网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。
定义一个指令的方法非常简单,只需要调用`directive`方法即可:
var app=angular.module('myapp',[]); app.directive(name,fn)
1. 基础指令
var app=angular.module('myapp',[]); app.run(function($templateCache){ $templateCache.put('cache','模板内容来源于缓存
') }); app.directive('tsHello',function(){ return{ restrict:'EAC', template:'Hello,directive
' } }) app.directive('tsTplfile',function(){ return{ restrict:'EAC', templateUrl:'/static/tpl.html' } }); app.directive('tsTplscript',function(){ return { restrict:'EAC', templateUrl:'tpl', replace:true } }); //templateUrl属性值是添加的缓存名称,加速文件访问 app.directive('tsTplcache',function(){ return{ restrict:'EAC', templateUrl:'cache' } })
2. 重要指令
2.1 transclude
{{text}}
关于transclude更加详细的介绍,参见另外一篇文章
2.2 link
link属性的值是一个函数,在该函数中可以操控DOM元素的对象,包括绑定元素的各类事件,定义事件触发时执行的内容等:
link:function(scope,iEle,iAttrs)
link 函数包括3个主要的参数,其中,scope参数表示指令所在的作用域,它的功能与页面中控制器注入的作用域是相同的,iEle参数表示指令中的元素,该元素可以通过Angular内部封装的jqLite进行调用,jqLite相当于是一个压缩版的jQuery,包含了主要的元素操作API,在语法上与jQuery类似,iAttrs参数表示指令元素的属性集合,通过这个参数可以获取元素中的各类属性。
{{content}}
自定义tsTplscript指令时,在指令返回的对象中添加了link属性,用于绑定和执行DOM元素的各类事件,在属性值执行的函数中,添加scope,iEle,iAttrs三个参数,在指令执行的过程中,由于指令中并没有定义scope属性,因此,scope参数默认就是元素外层父级scope属性,即控制器注入的$scope属性。
此外,iEle参数就是被指令模板替换后的
iAttrs参数是指令元素的属性集合,$$element则表示与属性对应的元素集合,该集合是一个数组。
2.3 compile
{{tip}}
控制台依次输出:
正在编译A指令 正在编译B指令 正在执行A中的pre函数 正在执行B中的pre函数 正在执行B中的post函数 正在执行A中的post函数
2.4 scope
2.4.1 当scope值是布尔类型
scope属性自定义指令时,默认值就是布尔类型的,初始值为false,在这种情况下,指令中的作用域就是指令元素所在的作用域,如果scope属性值为false,表示不创建新的作用域,直接继承父级作用域,二者数据完全相同,一方有变化,另外一方面将会自动变化。
如果scope属性值为true,表示子作用域是独立创建的,当它的内容发生变化时,并不会修改父作用域中的内容,不仅如此,一旦某个属性被子作用域进行了重置,那么,即使父作用域中的内容变化了,子作用域对应的内容也不会随之变化。
固定
在单击按钮之前,子作用域中的值随父作用域改变,当单击按钮之后,手动重置了子作用域中的'message'遍历,但与变量绑定的父作用域的内容并没有变化,并且子作用域也不再随父作用域发生变化。
2.4.2 当scope值是对象
如果将scope属性值设置成一个JSON对象,那么父作用域与子作用域完全独立,不存在任何关联。
当指令中的scope属性值是JSON对象时,如果子作用域需要添加属性,必须先添加指令中的link函数,然后通过函数中的scope对象进行添加,如果在子作用域中,要绑定或调用父父作用域中的属性和方法,则需要在scope属性对应的JSON对象值中添加绑定策略。
严格来说,在JSON对象中添加的有3种绑定策略:@ = &
1、@
@绑定与将scope值设为true,有许多相同的地方,唯一不同之处在于,@绑定在子作用域充值属性之后,再返回修改父作用域对应属性内容时,子作用域对应的属性,同样还是会随之发生变化,而使用scope:true,则不会发生这一步。
2、=
=绑定的功能是创建一个父与子作用域可以同时共享的属性,即当父作用域修改了该属性,子作用域也随之变化,反之亦然,两个作用域间完全共享和同步。
3、&
&绑定的功能是可以在独立的子作用域中直接调用父作用域的方法,在调用时可以向函数传递参数,这种功能的好处在于,避免重复编写功能相同的代码,只需要进行简单的绑定设置,就可以使指令执行后,轻松调用控制器中的方法。
姓名:
年龄:
{{tip}}重置
绑定的过程:
先在指令元素中创建a-attr或b-attr属性,由于HTML不区分大小写,因此使用-隔开。
需要注意的是:由于在指令中绑定策略不同,在指令元素中,属性绑定属性值也会有些变化,使用@绑定的属性,绑定属性值的方式为双大括号{{}},而使用=绑定的属性,绑定属性值的方式为等于号=,不需要双大括号.
2.5 require和controller
当一个子元素需要与一个父元素指令通信时,就需要添加并使用这两个属性值。
{{ptip}} {{ctip}}
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。
文章标题:Angular.js指令学习中一些重要属性的用法教程
URL网址:http://pwwzsj.com/article/gjpiss.html