Элемент обновления, созданный директивой об изменении контроллера varibale

Question

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

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

HTML

<form ng-submit=""> 
    <div ng-repeat="tagfield in tagfields"> 
     <dynamic-form dataobject="tagfield"></dynamic-form> 
    </div> 
    <button type="reset">Reset</button> 
    <button type="submit">Submit</button> 
</form> 

Script

app.directive('dynamicForm', [ '$rootScope', function($rootScope){ 
    return{ 
     restrict: 'E', 
     scope: { 
      dataObject:'=dataobject' 
     }, 
     link: function(scope, element, attrs){ 
      element.append(
        'Sample directive ' + scope.dataObject.selectmodel 
        + '<input type='+scope.selectmodel+' 
         ng-model='+scope.dataObject.idmodel+'>' 
      ); 
     } 
    } 

}]); 

Подробный код здесь plunker

https://embed.plnkr.co/7jBm9vxSx3y1hCCwjy1w/

Answer 1

пожалуйста, попробуйте следующий код в plunker и дайте мне знать, если он работает

app.directive('dynamicForm', [ '$compile', function($compile){ 
return{ 
    restrict: 'E', 
    scope: { 
     dataObject:'=dataobject' 
    }, 
    link: function(scope, element, attrs){ 

     var el ="Sample directive <span>" + scope.dataObject.selectmodel 
       + "</span><input type="+scope.dataObject.selectmodel+ "ng-value="+scope.dataObject.idmodel+"/>"; 
     element.append(el); 
     scope.$watch('dataObject.selectmodel',function(newvalue,oldvalue){ 

     if(oldvalue !=newvalue) 
     addelement(newvalue); 
     },true) 

     function addelement(valuedata) 
     { 
       element.children().remove() 
       var el ="Sample directive <span>" +    scope.dataObject.selectmodel 
       + "<span>"+"<input type='"+valuedata+ "'ng-value='"+scope.dataObject.idmodel+"'/>'"; 
     element.append($compile(el)(scope)); 

     } 
    } 
} 

}]);