AngularJS: 从字符串中插入 HTML

我已经找了很多，但是我要么找不到答案，要么就是不明白。一个具体的例子将赢得选票

我有一个返回 HTML 字符串的函数。
我不能改变功能。
我希望将字符串表示的 html 插入到 DOM 中。
我很乐意使用控制器、指令、服务或其他任何有效的工具(这是一个相当好的实践)。
免责声明: 我不明白 $编译好。

以下是我试过的方法:

// 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>

帮忙？

注意

我看了看这些，还有其他的，但是没有成功。

126297

小开

最佳答案

看看这个链接中的例子:

Http://docs.angularjs.org/api/ngsanitize.$sanitize

基本上，angle 有一个将 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>