directive ngBindHtml

最新推荐文章于 2019-11-27 13:11:54 发布

转载最新推荐文章于 2019-11-27 13:11:54 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ms-grf/p/7000067.html

本文介绍如何在AngularJS中安全地插入动态生成的HTML内容。通过使用ng-bind-html指令及$sanitize服务，可以确保HTML内容不会引入安全风险。此外，还介绍了如何显式信任HTML内容并绕过$sanitize的净化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　评估表达式，并以安全的方式将生成的HTML插入到元素中。默认情况下，生成的HTML内容将使用$sanitize服务进行清理。为了使用这个功能，确保$sanitize是可用的，例如，在模块的依赖项中包含ngsanitize(不在核心的AngularJS中)。为了在你的模块的依赖项中使用ngsanitize，你需要包含“angular-sanitize.js”。js”在您的应用程序。

　　你也可以绕过对你认为安全的价值观的净化。为此，可以通过$sce.trustashtml绑定到一个显式可信的值。在严格的上下文转义(SCE)下查看示例。

　　注意:如果一个$sanitize不可用，并且绑定值没有被显式地信任，您将会有一个异常(而不是一个漏洞)。

用法：

作为元素标签使用

<ng-bind-html
  ng-bind-html="expression">
...
</ng-bind-html>

作为元素标签属性使用

<ANY
  ng-bind-html="expression">
...
</ANY>

例子：

index.html

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
</div>

script.js

angular.module('bindHtmlExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', function($scope) {
        $scope.myHTML =
            'I am an <code>HTML</code>string with ' +
            '<a href="#">links!</a> and other <em>stuff</em>';
    }]);

转载于:https://www.cnblogs.com/ms-grf/p/7000067.html