从 AngularJS 控制器将 HTML 插入视图

是否可以在 AngularJS 控制器中创建 HTML 片段并在视图中显示此 HTML？

这需要将不一致的 JSON blob 转换为id : value对的嵌套列表。因此，HTML 是在控制器中创建的，我现在希望显示它。

我创建了一个模型属性，但是如果不打印 HTML，则无法在视图中呈现它。

更新

似乎问题来自角度渲染创建的 HTML 作为引号内的字符串。将试图找到解决这个问题的方法。

示例控制器：

var SomeController = function () {

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

示例视图：

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

给：

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

答案

对于 Angular 1.x，在 HTML 中使用ng-bind-html ：

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

此时，您将attempting to use an unsafe value in a safe context错误中attempting to use an unsafe value in a safe context因此您需要使用ngSanitize或$ sce来解决此问题。

$ SCE

在控制器中使用$sce.trustAsHtml()来转换 html 字符串。

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

ngSanitize

有两个步骤：

包括 angular-sanitize.min.js 资源，即：
<script src="lib/angular/angular-sanitize.min.js"></script>
在 js 文件（控制器或通常是 app.js）中，包含 ngSanitize，即：
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

你也可以像这样创建一个过滤器：

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

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

然后在视图中

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

注意：此过滤器信任传递给它的任何和所有 html，并且如果将带有用户输入的变量传递给它，则可能会出现 XSS 漏洞。

Angular JS 在标记内显示 HTML

上面链接中提供的解决方案对我有用，这个线程没有任何选项。对于任何使用 AngularJS 版本 1.2.9 寻找相同内容的人

这是一份副本：

好的，我找到了解决方案：

JS：

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

HTML：

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

编辑：

这是设置：

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 文件：

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