如何将 ng-model 添加到运行时创建的 html 对象 [英] How to add ng-model to an at runtime created html object

问题描述

我有一个像这样的简单 html 表单

<form action="" ng-controller="testController" id="parent"></表单>

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

var app = angular.module('app',[]);app.controller('testController',testController);功能测试控制器($scope){var input = document.createElement('input');var form = document.getElementById('parent');input.setAttribute("类型","数字");input.setAttribute("id","testId");input.setAttribute("name", "test");input.setAttribute("ng-model","test");form.appendChild(输入);}

输入字段也按预期生成

但是此输入字段和 $scope.test 之间的 ng-model 不起作用.

解决方案

重要提示:您不应该在控制器中进行 dom 操作，您需要使用指令来执行此操作.

也就是说，即使在指令中，如果您要创建动态元素，您也需要对其进行编译以对其应用角度行为.

var app = angular.module('app', [], function() {})app.controller('testController', ['$scope', '$compile', testController]);函数 testController($scope, $compile) {var input = document.createElement('input');var form = document.getElementById('parent');input.setAttribute("类型", "数字");input.setAttribute("id", "testId");input.setAttribute("name", "test");input.setAttribute("ng-model", "test");$编译(输入)($范围)form.appendChild(输入);}

<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}}</div></表单>

I'm having a simple html form like this

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

And now I want to add an input field from 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);
}

The input field also get's generated as expected

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

but the ng-model between this input field and $scope.test is not working.

解决方案

Important: You should not make dom manipulation in a cotroller, you need to use a directive to do that.

That said, even in a directive if you are creating a dynamic element you need to compile it to have angular behavior applied to it.

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 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！