从AngularJS控制器插入HTML到视图

Question

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

Answer 1

您还可以创建如下过滤器：

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漏洞。

Answer 2

角JS显示标签中的HTML

上述链接中提供的解决方案对我有效，这个线程上的任何选项都不起作用。对于任何使用AngularJS版本1.2.9查找相同内容的人

这里有一份副本：

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

联署材料：

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