Angularjs связывает динамическую форму bulit в js

Question

У меня есть форма, которую я хочу построить во время выполнения через js и использовать ее в контроллере формы в angularjs.
Как вы можете видеть в следующем примере, он не вызывается как html, и я хочу, чтобы он был привязан к переменной model. http://jsfiddle.net/g6m09eb7/

<div> 
    <form ng-controller="TodoCtrl" ng-submit="blabla()"> 
     <div ng-repeat="field in fields">{{field.input}}</div> 
    </form> 
</div> 

function TodoCtrl($scope) { 
    $scope.model = { 
     'FirstName': 'Test', 
     'LastName': 'Test Last' 
    } 
    $scope.fields = [{ 
     input: '<input type="text" ng-model="model.FirstName">' 
    }, { 
     input: '<input type="text" ng-model="model.LastName">' 
    }, ]; 
} 

Answer 1

Во-первых, я собираюсь показать вам, как сделать эту работу, как вы пытаетесь сделать это, ради того, чтобы быть информативным. Это не тот подход, который вы должны использовать для решения общей проблемы. Этот пример получит html в документе, но он не будет скомпилирован с помощью Angular. Для этого вам нужно будет иметь другую директиву, like this (click). Это все виды плохого подхода.

angular.module('myApp', []) 
 
.controller('TodoCtrl', function($scope) { 
 
    $scope.fields = [{ 
 
     input: '<input type="text" ng-model="model.FirstName">' 
 
    }, { 
 
     input: '<input type="text" ng-model="model.LastName">' 
 
    }, ]; 
 
}) 
 
// filter to make Angular trust the html 
 
.filter('safeHtml', ['$sce', function ($sce) { 
 
    return function (text) { 
 
     return $sce.trustAsHtml(text); 
 
    };  
 
}]) 
 
;     

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form ng-app="myApp" ng-controller="TodoCtrl"> 
 
    <!-- use ng-bind-html on trusted html to bind it (see the js) --> 
 
    <div ng-repeat="field in fields" ng-bind-html="field.input | safeHtml"></div> 
 
</form>

Вместо этого, вы можете сделать это естественно. Просто используйте свойства вашего объекта в качестве критериев для ng-repeat. Простой и чистый!

angular.module('myApp', []) 
 
.controller('TodoCtrl', function($scope) { 
 
    $scope.model = { 
 
    'FirstName': 'Test', 
 
    'LastName': 'Test Last' 
 
    }; 
 
}) 
 
;     

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<form ng-app="myApp" ng-controller="TodoCtrl"> 
 
    <div ng-repeat="(key,value) in model"> 
 
     <input type="text" ng-model="model[key]"/> 
 
    </div> 
 
</form>

Будьте уверены, чтобы избежать относительно контроллера с манипуляциями DOM. Если у вас есть html-фрагменты в контроллере, ваш подход, вероятно, отключен. DOM-манипуляция должна выполняться полностью с помощью директив.