AngularJS：从字符串插入HTML

Z时代
2024-01-10
分类：问答

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

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

帮帮我？

回答：

基本上，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中，您可以