Как динамически добавлять новый вход с помощью модели AngularJS JavaScript?

Question

У меня есть AngularJS контроллер:

$scope.name = "Ann"; 
$scope.test = "Hello, {{name}}!"; 

var element = document.createElement("input"); 
element.setAttribute('ng-model', "name"); 
document.getElementById("preview").appendChild(element); 

И HTML-код:

<div id="preview"> 
    <p ng-bind-html="test"></p> 
</div> 
{{name}} 

Но на странице я вижу Hello, {{name}}! пустой ввод и Ann имя. Как установить ввод и div для отображаемого имени? Что я меняю имя в имени и имени, измененном в div?

Answer 1

Checkout это plnkr

$scope.name = "Ann"; 
$scope.test = "Hello, {{name}}!"; 

var element = document.createElement("input"); 
element.setAttribute('ng-model', "name"); 
document.getElementById("preview").appendChild(element); 

$compile(document.getElementById("preview"))($scope); 

Answer 2

нг-HTML компиляции не компилирует привязок, но только разбирает статический HTML. Если вы также хотите иметь свой синтаксис компилируется в строках необходимо реализовать пользовательские директивы для этого:

app.directive('ngHtmlCompile', ["$compile", function ($compile) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.ngHtmlCompile, function (newValue, oldValue) { 
       element.html(newValue); 
       $compile(element.contents())(scope); 
      }); 
     } 
    } 
}]); 

, а затем вы можете скомпилировать:

<div ng-html-compile="Hello, {{name}}!"></div>