如何在运行时创建的html对象中添加ng-model

Question

我有一个简单的HTML表单，像这样：

<div ng-app="app">
    <form action="" ng-controller="testController" id="parent">
    </form>
</div>

现在我想从javascript中添加一个输入字段。

var app = angular.module('app',[]);
app.controller('testController',testController);
function testController($scope){
    var input = document.createElement('input');
    var form = document.getElementById('parent');

    input.setAttribute("type","number");
    input.setAttribute("id","testId");
    input.setAttribute("name", "test");
    input.setAttribute("ng-model","test");  
    form.appendChild(input);
}

输入字段也按预期生成。

<input type="number" id="testId" name="test" ng-model="test">

但是这个输入框和$scope.test之间的ng-model没有起作用。

- tung

---

在控制器中进行DOM操作是一种错误的做法...你需要使用$compile服务来编译新元素。 - Arun P Johny

使用指令进行DOM操作并编译。 - Hmahwish

Answer 1

重要提示: 您不应该在控制器中进行DOM操作，您需要使用指令来完成。 即使在指令中，如果您正在创建动态元素，则需要编译它，以使Angular行为应用于它。

var app = angular.module('app', [], function() {})

app.controller('testController', ['$scope', '$compile', testController]);

function testController($scope, $compile) {
  var input = document.createElement('input');
  var form = document.getElementById('parent');

  input.setAttribute("type", "number");
  input.setAttribute("id", "testId");
  input.setAttribute("name", "test");
  input.setAttribute("ng-model", "test");
  $compile(input)($scope)
  form.appendChild(input);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <form action="" ng-controller="testController" id="parent">
    <div>test: {{test}}</div>
  </form>
</div>

- Arun P Johny

---

ngModel不是一个指令吗？还是我对指令的理解有误？ - tung

你可以创建自己的指令，每当需要操作DOM时，请使用指令或者自己制作。 - m5khan