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屬性。