我有一个带有多个选项卡的选项卡页，一旦单击该选项卡，就会调用服务以返回一些数据。其中一些数据返回html表单，并且非常随机。我想收集输入的值，并通过服务将数据发送回服务器。我的问题是无法从正在动态创建的html中的输入元素中获取数据。
我创建了一个Plunker来显示问题所在。请注意，html值可以随时更改，因此对html进行硬编码将无法使用。在这里，代码来自plunker，但是请查看plunker，以获取最新动态。
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce, $compile) {
$scope.name = 'World';
$scope.html = "";
$scope.htmlElement = function(){
var html = "<input type='text' ng-model='html'></input>";
return $sce.trustAsHtml(html);
}
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-bind-html="htmlElement()"></div>
{{html}}
</body>
</html>
最佳答案
一种解决方案是将ngInclude与$ templateCache一起使用，如本Plunker所示。
有几件事要注意。
首先是您可以使用服务获取模板并将其添加到$ templateCache中，如here所述（复制示例）：
myApp.service('myTemplateService', ['$http', '$templateCache', function ($http, $templateCache) {
$http(/* ... */).then(function (result) {
$templateCache.put('my-dynamic-template', result);
});
}]);
然后可以将其包含在模板中，如下所示：
<div ng-include="'my-dynamic-template'"></div>
ngInclude将允许对html字符串进行数据绑定，因此您不需要ngBindHtml。
第二个原因是，当ngInclude创建新作用域时，除非您通过父作用域上的对象（例如，用
html而不是ng-model="data.html"）访问新创建的作用域之外的ng-model="html"属性将无法正常工作。注意，在这种情况下，父级作用域中的$scope.data = {}是使html可以在ngInclude范围之外访问的原因。（有关为什么为什么要在ngModels中始终使用点的更多信息，请参见this answer。）
编辑
正如您所指出的那样，使用服务返回HTML时，ngInclude选项的用处不大。
这是使用$ compile的基于指令的解决方案的编辑plunker，如上面的David的注释所示。
相关补充：
app.directive('customHtml', function($compile, $http){
return {
link: function(scope, element, attrs) {
$http.get('template.html').then(function (result) {
element.replaceWith($compile(result.data)(scope));
});
}
}
})
关于angularjs - 动态将Angularjs绑定(bind)到新创建的html元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19867554/