Question

我在一大段代码中有一个简单的场景：

Angular APP＆amp;控制器（一切运作良好）
稍后动态创建一个ng-model元素（或者说它来自ajax调用）。如何将其绑定到该控制器？

例如：

var dtApp = angular.module('App1', []);
dtApp.controller('Cont1', function($scope)
{
  .
  .
  .
  .
  $scope.xyz='1'; 
}
.
.
.
//element created dynamically on click: 
<input type="text" ng-model="xyz" />
.

这只是一个例子，但如果我知道解决方案，它将解决实际和更大的问题。

非常感谢。

Answer 1

您需要使用$compile。见AngularJS - Dynamically creating elements that specify directives

Answer 2

如果要在完成绑定后手动将DOM元素添加到控制器的DOM树中编译阶段，您需要使用 $ compile 服务自己编译控制器的范围并将其绑定到新的DOM元素：https://docs.angularjs.org/api/ng/service/ $ compile

var dtApp = angular.module('App1', []);
dtApp.controller('Cont1', function($scope, $compile)
{
   var parent_element_to_append = angular.element(YOUR_SELECTOR);
   var element = $compile("<input type="text" ng-model="xyz" />")($scope);
   parent_element_to_append.append(element);
}

Answer 3

为什么不使用元素可见性而不是生成它ng-show/ng-hide/ng-if。如果请求超出了控制器的可见性，您可以触发事件并监听它，然后使元素可见。通过这种方式，您将从一开始就获得元素，但是ng-model将绑定您的属性。只有当你不知道将要生成什么元素时（如果有很多可能性），这不会起作用，但是如果有一个小数字你可以添加所有元素并且只做一个你希望可见。

Answer 4

在其他帖子的帮助下（以及其他答案的一些提示），这是最简单的解决方案：

<强> 1。在JS代码中触发新的dom元素

angular.element(document.getElementById("Cont1")).scope().bindx('new_field_id');

<强> 2。在控制器内Cont1

//first add $compile in the function definition, then the following
$scope.bindx = function(ele_id)
{
    ele = $('#'+ele_id).parent();
    $compile(angular.element(ele).contents())($scope);
}

Angular JS - 如何应用/绑定ng-model late（lazy）

4 个答案: