AngularJS：从string插入HTML

我已经看了很多，但是我找不到答案，或者我不明白。 一个具体的例子将赢得投票=）

• 我有一个函数返回一个HTMLstring。
• 我不能改变function。
• 我希望string表示的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> 

帮帮我？

注意

我看着这些，但其他，但不能使它的工作。

• AngularJS：将HTML插入到视图中
• AngularJS $ http HTMLparsing器
• angularjs – 插入$ compile-d html
• AngularJS不会在用document.write（）插入的HTML中执行
• 在AngularJS指令中转义HTML文本

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

Answer 2

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