将HTML插入视图

Question

是否可以在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

对于Angular 1.x,请ng-bind-html在HTML中使用:

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

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

$ SCE

使用$sce.trustAsHtml()控制器的HTML字符串转换.

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

ngSanitize

有两个步骤:

1. 包括angular-sanitize.min.js资源,即:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. 在js文件(控制器或通常是app.js)中,包含ngSanitize,即:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Answer 2

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

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 3

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>

Answer 4

幸运的是,您不需要任何花哨的过滤器或不安全的方法来避免该错误消息.这是以预期和安全的方式在视图中正确输出HTML标记的完整实现.

必须在Angular之后包含sanitize模块:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

然后,必须加载模块:

angular.module('app', [
  'ngSanitize'
]);

这将允许您在控制器,指令等的字符串中包含标记:

scope.message = "<strong>42</strong> is the <em>answer</em>.";

最后,在模板中,它必须像这样输出:

<p ng-bind-html="message"></p>

这将产生预期的输出:42是答案.

Answer 5

我今天试过,我找到的唯一方法就是这个

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

Answer 6

ng-bind-html-unsafe 不再有效.

这是最短的方式:

创建一个过滤器:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

在你看来:

<div ng-bind-html="customHtml | unsafe"></div>

PS此方法不要求您包含该ngSanitize模块.

Answer 7

在HTML上

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

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

要么

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

在控制器上

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

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

也适用于 $scope.comment.msg = $sce.trustAsHtml(html);

Answer 8

我发现使用ng-sanitize不允许我在html中添加ng-click.

为了解决这个问题我添加了一个指令 像这样:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

这是HTML:

<htmldiv content="theContent"></htmldiv>

祝好运.

Answer 9

刚刚通过遵循angular(v1.4)文档使用ngBindHtml做到了这一点,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

确保在模块的依赖项中包含ngSanitize.那它应该工作正常.