首页 > 代码库 > angular学习笔记(三十)-指令(5)-link
angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性:
link:function(scope,iEle,iAttrs,ctrl,linker){
....
}
link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker
scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释
iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属性.)
iAttrs:指令元素的属性的集合
ctrl:需要和require属性一起使用,用于调用其他指令的方法,指令之间的互相通信,这个在讲require属性的时候会详细解释
linker:也就是angular学习笔记(三十)-指令(4)-transclude文章最后说到的transclude()函数,可以用于得到指令中需要被嵌入的那一坨内容.详见:angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
link函数主要用于操作dom元素,给dom元素绑定事件和监听.下面举个的例子:
一段文字,它的背景色根据输入的色值同步改变,当点击文字的时候,重置背景色
输入pink→
点击code_bunny→
下面来看代码:
html:
<!DOCTYPE html><html ng-app="dirAppModule"><head> <title>20.6指令</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script type="text/ng-template" id="text.html"> <div> <h3 style="background-color:{{color}}" ng-transclude></h3> </div> </script> <script src="script.js"></script> <style type="text/css"> h3 { color:#CB2027 } </style></head><body> <div ng-controller="bgColor"> <input ng-model="color" placeholder="请输入颜色值"/> <br/> <cd-hello name="bunny"><span>code_bunny</span></cd-hello> </div></body></html>
js:
var appModule = angular.module(‘dirAppModule‘, []);appModule.controller(‘bgColor‘,function($scope){});appModule.directive(‘cdHello‘,function(){ return { restrict:‘EAC‘, templateUrl:‘text.html‘, replace:true, transclude:‘element‘, link:function(scope,ele,attrs,ctrl,trans){ ele.bind(‘click‘,function(){ scope.$apply(function(){ scope.color = ‘#C0DCC0‘ }) }); ele.bind(‘mouseover‘,function(){ ele.css({‘cursor‘:‘pointer‘}) }); } }});
详细讲解:
1.scope: 这里由于指令中并没有定义scope属性,所以默认就是父scope.也就是bgColor控制器的$scope,所以他们是同步的,外层的color值修改了,指令的color也变了,指令的color值修改了,外层的color值也变了.这会在后面讲解scope的时候详细讲解.
2.ele: 指令元素的jqLite包装.cdHello指令元素会被替换成<div><h3 style="background-color:{{color}}" ng-transclude></h3></div>,所以,这里的ele就是div的jqLite包装,包装过后的元素就可以调用基本的jq的方法,比如这里的.bind(),.css()...用法和jq是一致的.
3.scope.$apply(function(){}): scope的$apply方法会在里面的函数被执行后重新渲染视图.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
完整代码:
angular学习笔记(三十)-指令(5)-link