在循環內動態生成角度指令

Question

我試圖動態編譯並在指令中添加一個指令和動態屬性;但是，我不斷收到錯誤。

任何人都知道爲什麼？

http://plnkr.co/edit/wOb9UuFwXR0dCZx2e2xg?p=preview

angular.module('plunker', []) 

    .controller('MainCtrl', function($scope) { 
    var vm = this; 
    vm.foo = { 
     bar: 'world' 
    }; 
    }).directive('addEditConfig', AddEditConfig) 

    .directive('inputElement', InputElement); 


function AddEditConfig($compile) { 
    var directive = { 
     restrict: 'E', 
     scope: { 
      edit: '@', 
      config: '=', 
      display: '=', 
      parentController: '=' 
     }, 
     template: '<div id="dynamicForm"></div>', 
     controllerAs: 'vm', 
     bindToController: true, 
     controller: AddEditConfigController, 
     link: linkFunction 
    } 

    return directive; 

    function linkFunction(scope, element, attr, ctrl) { 
     var params = [{description: 'foo', value:'bar'}, {description: 'foo', value:'bar'}, {description: 'foo', value:'bar'}, {description: 'foo', value:'bar'}]; 
     for (var i = 0; i < params.length; i++) { 
      angular.element(document.getElementById('dynamicForm')).append($compile('<input-element param="' + params[i] + '"></input-element>')(scope)); 
     } 
    } 
}; 

function AddEditConfigController() { 
}; 

function InputElement() { 
    var directive = { 
     restrict: 'E', 
     scope: { 
      param: '=' 
     }, 
     controllerAs: 'vm', 
     bindToController: true, 
     template: '<div class="form-group"> <div class="col-md-8"> <input id="port" name="textinput" type="text" placeholder="{{vm.param.description}}" class="form-control input-md" ng-model="vm.param.value"/> </div></div>', 
     controller: InputElementController, 
     link: linkFunction 
    } 
    return directive; 

    function linkFunction(scope, el, attr, ctrl) { 
    } 
}; 

function InputElementController() { 
    var vm = this; 

} 

Answer 1

的問題（其中至少一個）是在此聲明：

angular.element(document.getElementById('dynamicForm')).append($compile('<input-element param="' + params[i] + '"></input-element>')(scope)); 

寫這param="' + params[i] + '"生成以下DOM param="[Object Object]"。 所以它永遠不會按預期工作。

angular.module('plunker', []) 

    .controller('MainCtrl', function($scope) { 
    var vm = this; 
    vm.foo = { 
     bar: 'world' 
    }; 
    }).directive('addEditConfig', AddEditConfig) 

    .directive('inputElement', InputElement); 


function AddEditConfig($compile) { 
    var directive = { 
     restrict: 'E', 
     scope: { 
      edit: '@', 
      config: '=', 
      display: '=', 
      parentController: '=' 
     }, 
     template: '<div id="dynamicForm"><input-element param="param" ng-repeat="param in vm.params"></input-element></div>', 
     controllerAs: 'vm', 
     controller: AddEditConfigController 
    } 
    return directive; 
}; 

function AddEditConfigController() { 
    this.params = [{description: 'foo', value:'bar'}, {description: 'foo1', value:'bar1'}, {description: 'foo2', value:'bar2'}, {description: 'foo3', value:''}]; 
}; 

function InputElement() { 
    var directive = { 
     restrict: 'E', 
     scope: { 
      param: '=' 
     }, 
     template: '<div class="form-group"> <div class="col-md-8"> <input id="port" name="textinput" type="text" placeholder="{{param.description}}" class="form-control input-md" ng-model="param.value"/> </div></div>' 
    } 
    return directive; 

}; 

http://plnkr.co/edit/KdPvJdBsRwbjNsBCIvVh?p=preview