将 HTML 从 AngularJS 控制器插入到视图中

javascript angularjs escaping html-sanitizing

2022-08-29 22:25:55

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

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

我已经创建了一个模型属性，但是如果不打印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>

答案 1

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

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

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

$sce

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

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

ng消毒

有 2 个步骤：

包括 angular-sanitize.min.js资源，即：

<script src="lib/angular/angular-sanitize.min.js"></script>

在js文件（控制器或通常.js）中，包括ngSanitize，即：

angular.module('myApp', ['myApp.filters', 'myApp.services', 
    'myApp.directives', 'ngSanitize'])

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