从 AngularJS 控制器将 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);

ng 消毒

分两个步骤:

  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'])

您还可以创建一个过滤器,如下所示:

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>

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

清理模块必须包含在 Angular 之后:

<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答案

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

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

ng-bind-html-unsafe不再起作用。

这是最短的方法:

创建一个过滤器:

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

在您看来:

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

PS 此方法不需要您包括ngSanitize模块。

在 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);

我发现使用 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>

祝好运。

只是通过遵循angular(v1.4)docs使用 ngBindHtml 做到了这一点,

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

确保在模块的依赖项中包括 ngSanitize。然后它应该工作正常。

与 blrbr 的解决方案非常相似的另一种解决方案是,除了使用范围限定的属性外:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

接着

<render-html html="htmlAsString"></render-html>

请注意,您可以将element.append()替换为element.replaceWith()