2-way binding внутри директивного цикла

Question

Я пытаюсь написать простой строитель форм для своих клиентов. Идея заключается в том, чтобы создать простую форму, которую они могут использовать позже в разных случаях.

Для этого я нахожусь в этом месте, создавая директиву для разбора формы json обратно в html через директиву.

angular 
    .module('myApp') 
    .directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) { 
     return { 
     restrict:'AE', 
     require: 'ngModel', 
     scope: { 
       form: '=ngModel' 
      }, 
     link: function(scope, element, attrs) { 
       $timeout(function() { 
        var bones = scope.form.structure; 

        scope.formId = scope.form.title.replace(/\W+/g, " ").replace(/\s/g,'').toLowerCase(); 

        var html = '<form id="{{formId}}" class="row">'; 

        angular.forEach(bones, function(bone, key) { 
         if(bone.type == 'text' || bone.type == 'checkbox') { 
          scope[key] = $parse('form.data.'+key)(scope); 
          html += '<input-field class="col s12"><input type="'+bone.type+'" id="'+bone.type+key+'" ng-model="form.data['+key+']" /> <label for="'+bone.type+key+'">'+bone.label+'</label></input-field> '; 
         } 
        }) 

        html += '<p>{{form.data.input1}}</p>'; 

        html += '</form>'; 
        element.append($compile(html)(scope)); 
      }) 
     } 
    }; 
}]); 

Проблема в следующем: я перебираю элементы, чтобы найти их снова в html. Это явно не работает должным образом. Я могу $ проанализировать его, но затем потеря 2-way binding ...

Любые мысли?

Структура JSON является:

$scope.form = { 
     title: 'My first form', 
     structure: { 
      input1: { 
       type: 'text', 
       label: 'Input label' 
      }, 
      input2: { 
       type: 'checkbox', 
       label: 'This is a checkbox' 
      }, 
      input3: { 
       type: 'checkbox', 
       label: 'This is a CHECKED checkbox' 
      } 
     }, 
     data: { 
      input1: 'Yannick', 
      input2: false, 
      input3: true 
     } 
    } 

Answer 1

Я хотел бы избежать, используя атрибут ng-model, который создает экземпляр ngModelController. Вместо того, чтобы использовать одноразовую связывания:

<formbuilder form="::form"></formbuilder> 

В директиве, использование изолировать сферу с односторонним (<) связывания:

.directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) { 
    return { 
    restrict:'AE', 
    /* 
    require: 'ngModel', 
    scope: { 
      form: '=ngModel' 
     }, 
    */ 
    scope: { form: "<" }, 

Это будет связывать form объект ссылка к изолята сферы , Изменения в содержимом с помощью директивных входов будут совместно использоваться с объектом родительской области. Нет необходимости делать двустороннюю привязку объекта ссылка.

Кроме того, по понятным причинам, не используйте кронштейн обозначения для свойства аксессору, а не использовать точечную нотацию:

//html += '<input ng-model="form.data['+key+']"' 

    //USE dot notation 
    html += '<input ng-model="form.data.'+key+'"' 

DEMO on PLNKR.