Angularjs двусторонняя привязка данных для данных формы POST

Question

Использование angularjs, я пытаюсь заполнить форму динамически, а затем отправить данные форм через POST на сервер.

Я создал переменные данные в моем контроллере (для POST позже)

$scope.data = {}; 

Тогда в моем HTML, чтобы создать элементы в виде

<div ng-repeat="(name, attributes) in fields"> 
    <element myVar="data.{{name}}" name="{{name}}" attributes="{{attributes}}" ></element> 
</div> 

Где поля выглядят как

{"agency":{"name_displayed":"Agency","size":"30","tag":"input","type":"text"},"department":{"name_displayed":"Department","size":"30","tag":"input","type":"text"},"description":{"cols":"50","name_displayed":"Description","rows":"4","tag":"textarea"}} 

Директива элемента тогда выглядит так, но порождает ошибки

demoApp.directive("element", function() { 

    var template = function(name, attributes, results) { 
     var templateString = "<" + attributes.tag; 
     for (var attribute in attributes) { 
      if (attribute != "name_displayed" && attribute != "tag" && attribute != "options") { 
       templateString += " " + attribute + '="' + attributes[attribute] + '"'; 
      } 
     } 
     if (attributes.tag == "input") {templateString += ' value="' + results + '"';} 

     templateString += ' name="' + name + '">'; 
     templateString += ' ng-model="myVar">'; 

     if (attributes.tag == "select") { 
      for (var i=0; i<attributes.options.length; i++) { 
       templateString += "<option value=" + attributes.options[i] + ((attributes.options[i] == results)? " selected" : "") + ">" + attributes.options[i] + "</option>"; 
      } 
     } 
     if (attributes.tag == "textarea") { 
      templateString += results; 
     } 

     templateString += "</" + attributes.tag + ">"; 
     var toReturn = attributes.name_displayed + ": " + templateString; 
     return toReturn; 
    }; 

    return { 
     restrict: "E", 
     scope: { 
      myVar: '=' 
     }, 
     link: function(scope, element, attrs) { 
      var attributes = angular.fromJson(attrs.attributes); 
      var tpl = template(attrs.name, attributes, attrs.results); 
      element.html(tpl); 
     } 
    }; 
}); 

Без атрибута myVar и объекта области видимости в директиве это прекрасно работает (для отображения формы). Я пропустил что-то о двухсторонней передаче данных здесь? Или есть лучший способ сделать это? - Спасибо

Answer 1

Кажется странным, что вы добавляете HTML без компиляции. Меняю бы link первую очередь:

.... 
link: function(scope, element, attrs) { 
     var attributes = angular.fromJson(attrs.attributes); 
     var tpl = template(attrs.name, attributes, attrs.results); 
     var tpl_compiled = angular.element($compile(tpl)(scope)); 
     element.html(tpl_compiled); 
    } 
... 

Этим способом мы говорим с угловым сделать цикл дайджеста над новым прилагаемых данными. Возможно, это причина, почему с областью выделения myVar не выстрелил.

Надеется, что это поможет,

Answer 2

В вашем HTML MYVAR должен быть отформатировано как мой-вар. Вам действительно нужна изолированная область действия этой директивы? Посмотрите на этот плункер и добавьте пример Максима Шустина.

Plunker