将 Angularjs 动态绑定到新创建的 html 元素 [英] Bind Angularjs to newly created html element dynamically
问题描述
我有一个包含多个选项卡的选项卡页，一旦点击调用服务以返回一些数据.其中一些数据返回 html 表单并且非常随机.我想收集那些输入的值并通过服务将数据发送回服务器.我的问题是我无法从动态创建的 html 中的输入元素中获取数据.
I have a tab page with multiple tabs that once clicked on call a service to return some data. Some of that data returns html forms and are very random. I want to collect those values that are entered and send the data via a service back to the server. The problem I have is that I can't get the data from the input elements in the html I'm creating dynamically.
我创建了一个 Plunker 来显示问题所在.请注意，html 值可以随时更改，因此对 html 进行硬编码将不起作用.这是来自 plunker 的代码，但请查看 plunker 以获得最佳视图.
I've created a Plunker to show what the issue is. Note that the html value can change at any time so hard-coding the html won't work. Here the code from the plunker, but please look at the plunker for the best view of whats going on.
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.
One solution would be to use ngInclude with $templateCache, as demonstrated in this Plunker.
有几点需要注意.
首先，您可以使用服务获取模板并将其添加到 $templateCache，如此处所述(复制示例):
The first is that you can fetch your template using a service and add it to the $templateCache, as described here (example copied):
myApp.service('myTemplateService', ['$http', '$templateCache', function ($http, $templateCache) {
$http(/* ... */).then(function (result) {
$templateCache.put('my-dynamic-template', result);
});
}]);
然后您可以将其包含在您的模板中，如下所示:
Then you can include it in your template as follows:
<div ng-include="'my-dynamic-template'"></div>
ngInclude 将允许对 html 字符串进行数据绑定，因此您不需要 ngBindHtml.
ngInclude will allow databinding on the html string, so you don't need ngBindHtml.
第二个是，当 ngInclude 创建一个新的作用域时，访问新创建的作用域之外的 html 属性将无法正常工作，除非您通过父作用域上的对象访问它(例如ng-model="data.html" 而不是 ng-model="html".注意 $scope.data = {}在这种情况下，父作用域中的 html 可以在 ngInclude 作用域之外访问.
The second is that, as ngInclude creates a new scope, accessing the html property outside of the newly created scope won't work properly unless you access it via an object on the parent scope (e.g. ng-model="data.html" instead of ng-model="html". Notice that the $scope.data = {} in the parent scope is what makes the html accessible outside of the ngInclude scope in this case.
(请参阅此答案，了解有关为什么应始终在 ngModel 中使用点的更多信息.)
(See this answer for more on why you should always use a dot in your ngModels.)
编辑
正如您所指出的，在使用服务返回 HTML 时，ngInclude 选项的用处要小得多.
As you pointed out, the ngInclude option is much less useful when using a service to return the HTML.
这是经过编辑的 plunker 使用 $compile 的基于指令的解决方案，就像上面大卫的评论一样.
Here's the edited plunker with a directive-based solution that uses $compile, as in David's comment above.
相关补充:
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 动态绑定到新创建的 html 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
