这篇主要介绍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方法会在里面的函数被执行后重新渲染视图.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
完整代码: