I try to make dynamic form, that will be created from server and sended to client. In server I create this code:
<div ng-app="myapp">
<div>
<form ng-controller="MyController"><br>
<input id="desc" pattern="[A-Z][a-z 0-9]*" required="" type="text" class="InputDoc" ng-model="Document.desc"><br>
<input id="number" min="4" max="40" required="" type="number" class="InputDoc" ng-model="Document.number"><br>
</form>
</div>
</div>
And client have only div tag as place, where I want to store output:
<div id="result">
</div>
But in JavaScript file, when data was downloaded from XHR function, I create element div and script:
var div = document.createElement("div");
div.setAttribute("ng-app", "myapp");
var script = document.createElement("script");
div.innerHTML = res;
script.innerHTML = "angular.module('myapp', []).controller('MyController', function($scope){ $scope.Document = {}; $scope.Document.title = 'test1'; $scope.Document.desc = 'test3'; });";
div.appendChild(script);
document.getElementById("result").appendChild(div);
After this, my page is rendered exacly, how I imagine, but input types, and controller are not binding, and values aren't set. But, if I copy rendered content, and save it as other page and run, then everything works and is fine.
How to dynamically set that form ? I should have some dynamic bindings, because sometimes these inputs will be 5, sometimes 10.