将Angularjs动态绑定到新创建的html元素
我有一个带有多个选项卡的选项卡页，一旦单击call a service就会返回一些数据。其中一些数据返回html表单，并且是非常随机的。我想收集那些输入的值，并通过服务将数据发送回服务器。我遇到的问题是，我不能从动态创建的html中的input元素中获取数据。
我已经创建了一个Plunker来显示问题所在。请注意，html值可以随时更改，因此硬编码html将不起作用。这里是柱塞的代码，但请查看柱塞，以获得所发生的事情的最佳视图。
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>回答 3
Stack Overflow用户
发布于 2013-11-09 05:38:02
一种解决方案是将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 = {}使得可以在ngInclude作用域之外访问html。
(有关为什么应该在ngModels中始终使用点的更多信息，请参阅this answer。)
编辑
正如您所指出的，在使用服务返回ngInclude时，HTML选项的用处要小得多。
下面是使用$compile的基于指令的解决方案的编辑后的plunker，正如大卫在上面的评论中所述。
相关的添加：
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));
});
}
}
})Stack Overflow用户
发布于 2014-07-23 04:45:31
根据Sarah的回答，我创建了一个结构来放置指令
.directive('dynamic', function(AmazonService, $compile) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
AmazonService.getHTML()
.then(function(result){
element.replaceWith($compile(result.data)(scope));
})
.catch(function(error){
console.log(error);
});
}
};
});在html中：
<dynamic></dynamic>谢谢莎拉，帮了我大忙！
Stack Overflow用户
发布于 2016-05-13 21:02:08
我有一个带有一些ng重复的动态表，然后当我试图用javascript回调函数填充一列时，它只给出如下的html文本
<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>
<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>
<td class="tableList_"+myValue> "span class=someclass> some_text /span>" </td>所以我用jquery解决了我的问题：
$(".tableListFilas td").each(function() {
var td_class = $(this).attr("class");
if(td_class == 'tableList_'+titulo)
{
var toExtraHtml = $(this).text();
$(this).html(toExtraHtml);
}
});那么最终的输出是好的：
<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>
<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td>
<td class="tableList_COLORS"> <span class=someclass>some_text</span> </td> https://stackoverflow.com/questions/19867554
复制相似问题