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无效。

Answer 1

重要：你不应该在cotroller中进行dom操作，你需要使用指令来做到这一点。

即使在指令中，如果要创建动态元素，则需要对其进行编译以应用角度行为。

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>

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

1 个答案: