Угловые вложенные поля формы с использованием директивы

Question

Я пытаюсь создать форму динамически, используя ответ сервера. Форма может иметь поля, которые вложены, сгруппированы и так далее. Я попытался создать директиву для моего типа поля как «form-field» и использовал директиву ng-include для повторения для всех вложенных полей.

Когда я делаю это с помощью ul-li, вывод выглядит корректно, но когда я начинаю использовать поля и текстовые поля, вывод не выводит вообще для текстовых полей.

// Code goes here 

angular.module('NestedForm', []). 
controller('formController', function($scope) { 


}).directive('formField',function($compile) { 
    return { 
     replace:true, 
     require:'ngModel', 
     scope:{ 
      data :'=data', 
      ngModel : '=' 
     }, 
     restrict:'E', 
     link : function($scope, $element, $attrs) 
     { 
      var type = $scope.data.type; 
      var html = ""; 
      switch(type) 
      { 
      case 'textbox' : 
       html = '<input id=\''+$scope.data.name+'\' type="text" ng-model="ngModel" class="form-control">';break; 
      case 'fieldset' : 
       html = '<fieldset><legend>'+$scope.data.name+'</legend></fieldset>';break; 
      default: 
       break; 
      } 
      var $e =$compile(html)($scope); 
      $element.replaceWith($e); 
     } 
    } 
}); 

http://plnkr.co/edit/9b7wnPaaeppdJyq26qlN

Цените вашу помощь.

Answer 1

Во-первых, ваш вопрос слишком длинный. Многие люди просто хотят быстро читать, понимать и отвечать, если они знают об этом. Если вопрос слишком длинный, мы не читаем быстро, понимание неверно, и ответ не вытекает из полного понимания вашего вопроса.

Я не полностью прочитал ваш вопрос, но, похоже, вы заменяете полный элемент.

Проверьте это.

http://plnkr.co/edit/01T5d4ngGviKI0jPafSO?p=preview

 var $e =$compile(html)($scope); 
     $element.append($e); //instead of replacing it