从AngularJS控制器将HTML插入视图

本文翻译自：Insert HTML into view from AngularJS controller

Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view? 是否可以在AngularJS控制器中创建HTML片段并将该HTML显示在视图中？

This comes from a requirement to turn an inconsistent JSON blob into a nested list of id : value pairs. 这是因为需要将不一致的JSON Blob转换为id : value对的嵌套列表。 Therefore the HTML is created in the controller and I am now looking to display it. 因此，在控制器中创建了HTML，现在我希望显示它。

I have created a model property, but cannot render this in the view without it just printing the HTML. 我已经创建了一个模型属性，但是如果不打印HTML，就无法在视图中呈现它。

---

Update 更新资料

It appears that the problem arises from angular rendering the created HTML as a string within quotes. 看起来问题出在将创建的HTML角化为引号内的字符串而引起。 Will attempt to find a way around this. 将尝试找到解决此问题的方法。

Example controller : 控制器示例：

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

Example view : 示例视图：

<div ng:bind="customHtml"></div>

Gives : 给出：

<div>
    "<ul><li>render me please</li></ul>"
</div>

---

#1楼

参考：https://stackoom.com/question/dMfO/从AngularJS控制器将HTML插入视图

---

#2楼

For Angular 1.x, use ng-bind-html in the HTML: 对于Angular 1.x，在HTML中使用ng-bind-html ：

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

At this point you would get a attempting to use an unsafe value in a safe context error so you need to either use ngSanitize or $sce to resolve that. 此时，您将attempting to use an unsafe value in a safe context错误中attempting to use an unsafe value in a safe context因此您需要使用ngSanitize或$ sce来解决该问题。

$sce $ sce

Use $sce.trustAsHtml() in the controller to convert the html string. 在控制器中使用$sce.trustAsHtml()转换html字符串。

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize ng消毒

There are 2 steps: 分两个步骤：

1. include the angular-sanitize.min.js resource, ie: 包括angular-sanitize.min.js资源，即：
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. In a js file (controller or usually app.js), include ngSanitize, ie: 在js文件（控制器或通常为app.js）中，包括ngSanitize，即：
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

---

#3楼

我今天尝试过，我发现的唯一方法是

<div ng-bind-html-unsafe="expression"></div>

---

#4楼

on html 在html上

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

OR 要么

<div ng-bind-html="myCtrl.comment.msg"></div

on controller 在控制器上

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

works also with $scope.comment.msg = $sce.trustAsHtml(html); 还可以与$scope.comment.msg = $sce.trustAsHtml(html);

---

#5楼

Angular JS shows HTML within the tag Angular JS在标记中显示HTML

The solution provided in the above link worked for me, none of the options on this thread did. 上面链接中提供的解决方案对我有用，该线程上的所有选项均无效。 For anyone looking for the same thing with AngularJS version 1.2.9 对于使用AngularJS 1.2.9版寻找相同内容的任何人

Here's a copy: 这是副本：

Ok I found solution for this: 好的，我找到了解决方案：

JS: JS：

 $scope.renderHtml = function(html_code) { return $sce.trustAsHtml(html_code); }; 

HTML: HTML：

 <p ng-bind-html="renderHtml(value.button)"></p> 

EDIT: 编辑：

Here's the set up: 设置如下：

JS file: JS档案：

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

HTML file: HTML档案：

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

---

#6楼

You can also create a filter like so: 您还可以创建一个过滤器，如下所示：

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Then in the view 然后在视图中

<div ng-bind-html="trusted_html_variable | trust"></div>

Note : This filter trusts any and all html passed to it, and could present an XSS vulnerability if variables with user input are passed to it. 注意 ：此过滤器信任传递给它的所有HTML，并且如果将带有用户输入的变量传递给它，则可能呈现XSS漏洞。