如何使用 Angular 在元素中编写 HTML

How to write HTML inside elements with Angular

本文关键字：HTML 元素 何使用 Angular      更新时间：2023-09-26

我从Angular开始，只是想用Ajax做一些测试，在我的页面中检索一个文档。它运行良好，但随后出现了一个新的挑战：我希望能够在 DOM 元素中添加 HTML。

通常，人们会从指令和模板中做到这一点。但我想在运行时使用控制器执行此操作。

这是我的代码：

$http.get("import.html").then(function(response){
    var element = document.createElement("div");
    element.innerHTML = response.data;
    angular.element("#div1").innerHTML(element);
        });

也许我没有正确使用"angular.element"？我尝试使用document.getElementByID，但它也不起作用。我从文件中正确接收信息，但我只是找不到可以在运行时编译该 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：（测试了你所有的例子，没有一个对我有用，这是我使用的最后一个）

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);
    });

}]);

通常，如果 HTML 包含任何角度功能，您希望编译 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));
  });
}]);
如果你执意

要使用innerHTML，请注意angular.element("#div1")与jQuery中的$("#div1")相同。所以你需要写angular.element("#div1")[0].innerHTML= ...

这是一个 plnkr： http://plnkr.co/edit/p3TXhBppxXLAMwRzJSWF?p=preview

在这方面，我使用了$sce .它是 AngularJS 的依赖注入，它将 HTML 视为安全的绑定。您可以在AngularJS站点中阅读有关它的信息。请找到下面的代码和工作jsfiddle，以解决提出的问题：

.HTML： 

<div ng-app="app" ng-controller="test">
    <div>
        This is onload HTML
    </div>
    <div ng-bind-html="dynamicHtml"></div>
</div>

.JS

var app = angular.module('app', []);
app.controller('test', function ($scope, $sce) {
    $scope.dynamicHtml = $sce.trustAsHtml("<div>This is dynamic HTML!!");
});

[更新]

.HTML：

<div ng-bind-html="dynamicHtml"></div>`

.JS：

$http.get("import.html").then(function (response) {
    $scope.dynamicHtml = $sce.trustAsHtml(response.data); //Assuming 'response.data' has the HTML string
});

您没有正确使用角度。如果你使用角度，你永远不必使用DOM选择器。

范围与视图上的ng-model和{{}}绑定。

现在你的答案。要在视图上打印 html，您可以通过以下方式执行此操作：

在控制器中：

$http.get("import.html").then(function(response){
   $scope.html = $sce.trustAsHtml(response.data);
});

在视图：

<div ng-bind-html="html"></div>

还有更简单的方法：

<ng-include="'url/import.html'"><ng-include>

就是这样！！！

相关文章：