如何使用Angular在元素内部编写HTML
[英]How to write HTML inside elements with Angular
问题描述
I'm beginning with Angular, and just wanted to make some tests with Ajax, retrieving a document into my page. 
我从Angular开始，只是想用Ajax进行一些测试，将文档检索到我的页面中。 It works perfectly, but then a new challenge appeared: I want to be able to add HTML inside a DOM element. 它可以完美运行，但是随后出现了一个新的挑战：我希望能够在DOM元素内添加HTML。
Normally, one would do that from a directive and the templates thingy. 通常，可以通过指令和模板来实现。 But I want to do it at runtime, using a controller. 但是我想在运行时使用控制器。
This is my code: 这是我的代码：
$http.get("import.html").then(function(response){
var element = document.createElement("div");
element.innerHTML = response.data;
angular.element("#div1").innerHTML(element);
});
Maybe I'm not using correctly "angular.element"? 也许我没有正确使用“ angular.element”？ I tried using document.getElementByID, but it doesn't work either. 我尝试使用document.getElementByID，但这也不起作用。 I receive correctly the information from the file, but I just don't find a way I can compile that HTML in runtime. 我从文件中正确接收了信息，但是我找不到在运行时编译HTML的方法。
Any help with this? 有什么帮助吗？
edit for showing my full code: 编辑以显示我的完整代码：
HTML: HTML：
<!DOCTYPE html>
<html ng-app="miApp">
<head>
<meta charset="UTF-8">
<script src="angular.js"></script>
<script src="mainmodule.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body ng-controller="controlador1">
<div id="div1" ng-bind-html="myHtml" style="top:50px;left:50px">
</div>
</body>
</html>
JS: (tested all your examples, none worked for me, this is the last I used) JS ：（测试了所有示例，没有一个对我有用，这是我最后使用的示例）
app.controller('controlador1', ["$scope", "$http", "$sce", "$compile", function($scope, $http, $sce, $compile) {
$http.get("import.html").then(function(response) {
var parent = angular.element("#div1");
var element = angular.element($sce.trustAsHtml(response.data);
$compile(element)($scope);
parent.append(element);
});
}]);
3 个解决方案
解决方案1
1 2016-02-03 10:10:17
Usually, you want to compile your HTML if it contains any angular functionality at all (you need to declare '$compile' in your controller dependency list): 通常，如果您的HTML根本不包含任何角度功能，则您希望对其进行编译（您需要在控制器依赖项列表中声明“ $ compile”）：
myApp.controller('myController', ['$scope', '$sce', '$compile'],
$scope, $sce, $compile) {
$http.get("test.html")
.then(function(response){
var parent = angular.element("#div1");
parent.append($compile(response.data) ($scope));
});
}]);
if you are hell-bent on useing innerHTML , note that angular.element("#div1") is the same as $("#div1") in jQuery. 如果您angular.element("#div1")于使用innerHTML ，请注意， angular.element("#div1")与jQuery中的$("#div1")相同。 So you need to write angular.element("#div1")[0].innerHTML= ... 因此，您需要编写angular.element("#div1")[0].innerHTML= ...
Here's a plnkr: http://plnkr.co/edit/p3TXhBppxXLAMwRzJSWF?p=preview 这是plnkr： http ：//plnkr.co/edit/p3TXhBppxXLAMwRzJSWF？p = preview
解决方案2
1 已采纳 2016-02-03 10:29:39
In this, I have made use of $sce . 在此，我利用了$sce 。 It's a dependency injection of AngularJS, where it treats the HTML as safe to bind. 这是AngularJS的依赖项注入，它将HTML视为安全绑定。 You can read about it in AngularJS site. 您可以在AngularJS网站上了解它。 Please find below code and working jsfiddle for the raised concern: 请在下面的代码和可工作的jsfiddle中找到所引起的关注：
HTML: HTML：
<div ng-app="app" ng-controller="test">
<div>
This is onload HTML
</div>
<div ng-bind-html="dynamicHtml"></div>
</div>
JS JS
var app = angular.module('app', []);
app.controller('test', function ($scope, $sce) {
$scope.dynamicHtml = $sce.trustAsHtml("<div>This is dynamic HTML!!");
});
[Update] [更新]
HTML: HTML：
<div ng-bind-html="dynamicHtml"></div>`
JS: JS：
$http.get("import.html").then(function (response) {
$scope.dynamicHtml = $sce.trustAsHtml(response.data); //Assuming 'response.data' has the HTML string
});
解决方案3
0 2016-02-03 10:09:08
You are not using correctly angular. 您没有正确使用角度。 If you use angular, you don't harly ever have to use DOM selector. 如果使用angular，则不必再使用DOM选择器。
Scope is binded with ng-model and {{}} on the view. 范围与视图上的ng-model和{{}}绑定。
Now your answer. 现在您的答案。 To print html on the view, you can do it in that way: 要在视图上打印html，您可以通过以下方式实现：
In controller: 在控制器中：
$http.get("import.html").then(function(response){
$scope.html = $sce.trustAsHtml(response.data);
});
In view: 鉴于：
<div ng-bind-html="html"></div>
And more easy way: 更简单的方法：
<ng-include="'url/import.html'"><ng-include>
That's it!!! 而已！！！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.