在循环

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