angularjs - Dynamically generate angular directive within a loop -
i'm trying dynamically compile , append directive dynamic attribute in directive; however, keep getting error.
anyone know why?
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'}]; (var = 0; < 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; }
the problem (at least 1 of them) in statement :
angular.element(document.getelementbyid('dynamicform')).append($compile('<input-element param="' + params[i] + '"></input-element>')(scope)); writing param="' + params[i] + '" generates following dom param="[object object]". never work expected.
one way achieve :
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; }; 
Comments
Post a Comment