angularJS ng-repeat中的directive 動態加載template

有個需求，想實現一個html組件，傳入不一樣的typeId，渲染出不一樣的表單元素。

    <div ng-repeat="field in vm.data">
       <magic-field type="{{field.fieldTypeId}}"></magic-field>
    </div>

如當屬性type的值爲1，輸出input元素，type=2輸出textarea

也就是說咱們要在directive中根據屬性得到不一樣的template。

剛開始個人設想是利用 templateUrl 能夠接收一個方法：

    .directive('magicField', function(){
        return {
            templateUrl: function(elem, attr){
                if(attr.type == 1) {
                    template = 'tpl/mgfield/input.html'
                }
                if(attr.type == 2) {
                    template = 'tpl/mgfield/textarea.html'
                }
                return template;
            },
        }
    })

可是此路不通。

若是屬性值 type=1 是明確的能夠編譯成功，可是咱們的directive是放到了ng-repeat中，屬性值不固定，{{field.fieldTypeId}}沒有編譯。

打印attr，type值爲未編譯的 {{field.fieldTypeId}}。

緣由是執行順序問題，是先加載template內容而後執行link。

解決辦法：使用ng-include

完整代碼：

    angular.module("app", [])
    .controller("DemoCtrl", ['$scope', function($scope){
        var vm  = this;
        vm.data = [
            {
                fieldTypeId: 1,
                title: 'first name'
            },
            {
                fieldTypeId: 2,
                title: 'this is text area'
            }
        ]
    }])
    .directive('magicField', function(){
        return {
            template: '<div ng-include="getContentUrl()"></div>',
            replace: true,
            //transclude: true,
            link: function($scope, $element, $attr){
                $scope.getContentUrl = function() {
                    if($attr.type == 1) {
                        template = 'tpl/mgfield/input.html'
                    }
                    if($attr.type == 2) {
                        template = 'tpl/mgfield/textarea.html'
                    }
                    return template;
               }
            }
        }
    })