动态将Angularjs绑定到新创建的html元素
我有一个带有多个选项卡的选项卡页，一旦单击该选项卡，就会调用服务以返回一些数据。其中一些数据返回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，（例如复制）：
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范围之外可以访问。
编辑
正如您所指出的那样，使用服务返回HTML时，ngInclude选项的用处不大。
这是经过编辑的plunker，具有使用$
compile的基于指令的解决方案，如上述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));
});
}
}
})
-
问题内容： 我正在上传多个图像，并将它们放置在ondiv必须切换某些类的某些div中。我是否必须将添加onclick事件的部分放在ajax成功函数中？非常感谢！ 我正在使用“ on”上的jquery，但似乎不起作用。可能我缺少了一些东西 这是我的代码： Javascript： HTML： 问题答案： 对于动态创建的元素，您必须使用.live（）但是，在1.7中不推荐使用，而在中将其完全删除。该签名
-
问题内容： 我有这样的设置： 控制器广播事件 指令侦听，然后通过append将其写入DOM，并以此创建指定指令的新元素。 IE浏览器： Angular从未调用过指令 当我检查DOM（并调试）时，我看到Controller 和指令正在执行其工作，并且有新的元素。 什么不见了？动态创建这些元素后需要做什么来触发指令调用？ 问题答案： 请参阅。您可以类似于以下方式使用此服务： 这将执行新元素的编译和
-
本文向大家介绍AngularJS动态绑定HTML的方法分析，包括了AngularJS动态绑定HTML的方法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了AngularJS动态绑定HTML的方法。分享给大家供大家参考，具体如下： 在Web前端开发中，我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示，特别是在内容管理系统（CMS：是Content
-
问题内容： 我想将onclick事件绑定到我使用jQuery动态插入的元素 但是它从不运行绑定函数。如果您能指出此示例为何不起作用以及如何使其正常运行，我将不胜感激： 编辑：我编辑了该示例以包含方法插入到其中的两个元素。在这种情况下，将永远不会执行该调用。 问题答案： 第一个问题是，当您在具有多个元素的jQuery集合上调用append时，会为每个元素创建要添加的元素的克隆，因此丢失了附加的事件观
-
问题内容： 我刚开始使用angularJS，并努力为我要做的事情找出合适的架构。我只有一个页面应用程序，但 URL始终应该保持不变 ；我不希望用户能够导航到根以外的任何路由。在我的应用中，有一个主要的div需要承载不同的视图。访问新视图时，我希望它接管主div中的显示。以这种方式加载的视图可以被丢弃或停留在DOM中，就像隐藏在DOM中一样- 我很想知道每个视图如何工作。 我提出了一个我想做的粗略的
-
问题内容： 我使用jquery fancybox 1.3.4作为弹出表单。 但是我发现fancybox无法绑定到动态添加的元素。例如，当我向当前文档中添加html元素时。 像这样：首先我使用jquery将一个元素附加到主体， 我叫fancybox， 但fancybox不适用于动态添加的元素。 我不能从此元素调用fancybox吗？ 问题答案： 将fancybox（v1.3.x）绑定到动态添加的元素