AngularJS：从字符串中插入 HTML

Posted 2023-03-05

【中文标题】AngularJS：从字符串中插入 HTML

【英文标题】：AngularJS: Insert HTML from a string

【发布时间】：2013-01-23 13:53:20

【问题描述】：

我已经为此寻找了很多，但我要么找不到答案，要么不明白。一个具体的例子将赢得投票 =)

我有一个返回 html 字符串的函数。 我无法更改功能。 我希望将字符串表示的 html 插入到 DOM 中。 我很乐意使用控制器、指令、服务或其他任何可行的方法（并且是相当好的做法）。 免责声明：我不太了解 $compile。

这是我尝试过的：

// My magic HTML string function.
function htmlString (str) 
    return "<h1>" + str + "</h1>";


function Ctrl ($scope, $compile) 
  $scope.htmlString = htmlString;

Ctrl.$inject = ["$scope", "$compile"];

那没用。

我也尝试将其作为指令：

// My magic HTML string function.
function htmlString (str) 
    return "<h1>" + str + "</h1>";


angular.module("myApp.directives", [])
  .directive("htmlString", function () 
    return 
      restrict: "E",
      scope:  content: "@" ,
      template: " htmlStr(content) "
    
  );

  ... and in my HTML ...

  <html-string content="foo"></html-string>

帮助？

注意

我查看了这些以及其他内容，但无法使其发挥作用。

AngularJS : Insert HTML into view AngularJS $http HTML Parser angularjs - inserting $compile-d html AngularJS doesn't execute in HTML inserted with document.write() Escape HTML text in an AngularJS directive

【参考方案1】：

查看此链接中的示例：

http://docs.angularjs.org/api/ngSanitize.$sanitize

基本上，Angular 有一个将 html 插入页面的指令。在您的情况下，您可以使用 ng-bind-html 指令插入 html，如下所示：

如果你已经完成了所有这些：

// My magic HTML string function.
function htmlString (str) 
    return "<h1>" + str + "</h1>";


function Ctrl ($scope) 
  var str = "HELLO!";
  $scope.htmlString = htmlString(str);

Ctrl.$inject = ["$scope"];

然后在你的html那个控制器范围内，你可以

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

【讨论】：

谢谢！那行得通。进行了一些修改：修复了链接（奇怪地解析了它），将“ng-bind-html”更改为“ng-bind-html-unsafe”，并给出了一个更完整的示例。

在 1.0.8 之前是 ng-bind-html-unsafe，之后只是 ng-bind-html，因为安全和不安全的功能被合并了 github.com/angular/angular.js/blob/master/…

@AakilFernandes，我必须将ngSanitize 添加到我的主模块中，ng-bind-html 才能工作。

【参考方案2】：

您也可以使用$sce.trustAsHtml('"<h1>" + str + "</h1>"')，如果您想了解更多详情，请参考$sce