2016年6月8日 星期三

AngularJS - 自製跟ng-repeat一樣能力的directive (my-repeat)

在這篇文中,我們要來製作一個跟AngularJS的ng-repeat有幾乎相同能力的自製directive(當然ng-repeat更完整,有更多的可用變數、接受表達示等)。

我們先定義出自製directive要擁有的能力,在這裡我們取名我們的directive叫作my-repeat:
  1. 使用型式如同ng-repeat,可用attribute的型式放在html element tag的attribute中使用。
  2. 其中,屬性裡面可以用 "XX in YYY" 這種型式的表達示來表示要對哪個array型式(YYY)的內部資料(XX)做迴圈。
  3. 在directive中,可以解析YYY中的XX來顯示資料,也可解析其他資料,例如controller中的變數。
  4. 能夠使用 "-start" 和 "-end" 的multiElement的用法。
  5. 此directive要可以嵌套到另一個directive中(其他的directive或自己)。

下面就是實現出的程式碼,可以在Result看到,我們的my-repeat擁有和ng-repeat相同的上述能力。(**有使用jQuery做$(element)和before()的動作)


在程式碼中已經寫了詳細的註解,不過我們還必須對執行完上述程式碼後,AngularJS產生出了什麼樣的Scope關係。
在程式碼裡,我們已經在有scope出現的地方進行了console.log()的輸出,可以由其中的屬性物件、$id、_proto_了解到scope之間的關係,以下已經用簡單圖示來表示從console.log()結果中看出的關係:





最左邊$id=1的就是rootScope,$id=2的是送入controller()的$scope參數,而裡面存了一個myCtrl物件,就是我們用"myController as myCtrl"命名的myCtrl物件。

$id=3是送入第一層directive的link()的$scope參數,因為繼承了$id=2,所以可以存取到myCtrl。
$id=4和$id=9是利用$id=3用$new()創造出來的scope,我們在其中設置了arrayData屬性。

$id=5和$id=10是送入第二層directive的link()的$scope參數,因為各自繼承了$id=4、$id=9,所以可以各自存取到$id=4、$id=9的arrayData。
$id=6、$id=7、$id=8和$id=11、$id=12、$id=13是$id=5、$id=10用$new創造出來的scope,並且我們在其中設置了data屬性。



沒有留言 :

張貼留言