這篇主要介紹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方法會在裡面的函式被執行後重新渲染檢視.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
完整程式碼: