html - AngularJS：从字符串中插入 HTML

Question

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

我有一个返回 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>

帮助？

笔记

我查看了这些以及其他内容，但无法使其正常工作。

score 90 · Accepted Answer

看看这个链接中的例子：

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>

score 15 · Accepted Answer

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

html - AngularJS：从字符串中插入 HTML

2 回答 2

Related

Reference