Angularjs ng-transclude、ng-repeat isolate scope

使用ng-transclude的過程中常發生自訂directive在加入scope{inpue: '='}屬性後代表宣告了isolate scope，並需透過binding方式取得上層scope內容，但是若此directive希望讓外部透過transclude方式來使用isolate scope的內容是需要一些方法來達成的。

 http://embed.plnkr.co/7ENPlf/preview

一、範例中index.html的controller為mainController而具有一個陣列items['a','b','c','d','e','f'],另外也自訂兩個標籤transcludeTest、repeatTemplate。

二、先看transcludeTest的部分

(function(){
    angular.module('transcludeModule',[])
        .directive('transcludeTest',function(){
            return{
                restrict: 'E',
                scope:{},//isolate scope can use binding to get parent's value
                template: '<div ng-transclude></div>',
                transclude: true,
                link: function(scope,element,attrs,parentCtrl,transcludeFn){
                    scope.items = ['This','is','transcludeDirective','text']
                }
            }
        })
})();

三、自訂此標籤可用ng-transclude加入外部樣板,而且使用了scope屬性代表使用isolate scope，且裡面也宣告了items並給予值，而index.html如下：

<div ng-controller="mainController">
    <div class="bg-danger">
      <h4>This is maninController's content</h4>
      main's items->{{items}}
    </div>
    <div class="bg-info">
        <h4>This is transclude demo</h4>
        <transclude-test>
            transclude's items->{{items}}
        </transclude-test>
    </div>
</div>

四、此時有趣的問題來了，main's items是顯示出 mainController's items沒問題，但<transclude-test>內顯示的items到底是mainController的scope還是directive內的scope呢?答案是mainController的scope.items
可以親自測試：http://plnkr.co/edit/mEN6Cx?p=preview然而<repeat-template>也會是一樣的結果，但不同的是repeat中未顯示出任何值(後續說明)。

五、由上述結果我們可以得知該頁面中的items是屬於mainController's items，但為什麼會如此呢?必須先了解Angularjs對於我們一些運算式{{items}}的compile是如何運作的e.g$compile: How it works, compile過程中需要使用相對應的scope去完成，故此則是以{{items}}上層所屬mainController的scope為compile依據。

六、那麼了解範例中的compile是以mainController的scope作為依據後，我們就可以在<transclude-test>這個directive中重新對我們的{{items}}再compile一次後重新加入樣板，因此可以在directive中的link階段使用transcludeFn加以完成，由Angularjs HTML Compiler中可以得知，使用$compile後會回傳一個function，而function可依據傳入的scope去進行compile，e.g：function(scope or parent scope，.......)，然而link階段中便有transcludeFn即是對ng-transclude的樣板進行compile後的function，因此我們在function中將isolate scope及clone dom傳入function中執行compile之後在index.html內<transclude-test>標籤中的{{items}}便能夠正確使用到directive中isolate scope的items。

(function(){
    angular.module('transcludeModule',[])
        .directive('transcludeTest',function(){
            return{
                restrict: 'E',
                scope:{},//isolate scope can use binding to get parent's value
                template: '<div ng-transclude></div>',
                transclude: true,
                link: function(scope,element,attrs,parentCtrl,transcludeFn){
                    scope.items = ['This','is','transcludeDirective','text']
                    transcludeFn(scope,function(clone){//in order to show isolate scope content
                        element.empty();
                        element.append(clone);
                    })
                }
            }
        })
})();

實際看結果：http://plnkr.co/edit/7ENPlf?p=preview

七、回到第四點中，為什麼ng-repeat未顯示出任何值呢?那是因為ng-repeat中每個迭代項都會創建子作用域(理解AngularJS的作用域Scope)，所以我們要對每個迭代項進行個別處理，因此可以再創一個自訂標籤inject來完成並依附在每個迭代項中。

 .directive('inject', function () {
            return {
                restrict: 'A',
                link: function (scope, element, attrs, ctrl, transcludeFn) {//目的使transclude的內容使用到isolate-scope,e.g{{item}}
                    if (!transcludeFn) return;
                    transcludeFn(scope, function (clone) {
                        element.empty();
                        element.append(clone);
                    });
                }
            };
        });

而自定義<repeat-template>也要在使用ng-repeat的元素中加入inject的attribute。

 .directive('repeatTemplate',function(){
            return{
                restrict: 'E',
                scope: {//isolate-scope
                    
                },
                template: '<li ng-repeat="dataItem in items"  inject>' +
                          '</li>',
                transclude: true,
                replact: true,
                link: function(scope,element,attrs,ctrl,transcludeFn){
                  scope.items = ['a','b','c'];
                }
            }
        })

看結果：http://plnkr.co/edit/7ENPlf?p=preview

最後可以了解AngularJS directives內compile及link的函式本質，有助於良好的directive的設計。