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

问题描述

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

 ＆LT; D​​IV NG-应用=应用程序＆GT;
    ＆LT;形式的行动=NG控制器=的TestControllerID =父＆GT;
    ＆LT; /表及GT;
＆LT; / DIV＆GT;
 

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

  VAR应用= angular.module（'应用'，[]）;
app.controller（'的TestController'的TestController）;
功能的TestController（$范围）{
    VAR输入=使用document.createElement（'输入'）;
    变种形式=的document.getElementById（父）;    input.setAttribute（类型，数字）;
    input.setAttribute（ID，testId）;
    input.setAttribute（名，测试）;
    input.setAttribute（NG-模式，测试）;
    form.appendChild（输入）;
}
 

输入字段也得到的预期产生

 ＆LT;输入类型=号码ID =testIdNAME =测试NG-模式=测试＆GT;
 

但此输入字段之间的NG-模型和 $ scope.test 是行不通的。

解决方案

重要提示：你不应该做的DOM操作在cotroller，你需要使用一个指令，要做到这一点的

。

这是说，即使在指令如果要创建一个动态的元素，你需要编译它有适用于它的角行为。

\r

\r

VAR应用= angular.module（应用，[]，（）的函数{}）\r
\r
app.controller（'的TestController'，['$范围，$编译，的TestController]）;\r
\r
功能的TestController（$范围，$编译）{\r
  VAR输入=使用document.createElement（'输入'）;\r
  变种形式=的document.getElementById（父）;\r
\r
  input.setAttribute（类型，数字）;\r
  input.setAttribute（ID，testId）;\r
  input.setAttribute（名，测试）;\r
  input.setAttribute（NG-模式，测试）;\r
  $编译（输入）（$范围）\r
  form.appendChild（输入）;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
  ＆LT;形式的行动=NG控制器=的TestControllerID =父＆GT;\r
    ＆LT; D​​IV＆GT;测试：{{}测试}＆LT; / DIV＆GT;\r
  ＆LT; /表及GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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-模型添加到在运行时创建的HTML对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！