angular學習筆記(三十)-指令(5)-link

詩&遠方發表於2014-09-18
Angular筆記

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

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

完整程式碼:

 

相關文章