AngularJs 绑定html数据 ng-bind-html

最新推荐文章于 2024-09-01 07:13:57 发布

原创最新推荐文章于 2024-09-01 07:13:57 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #纵观千象 #每天进步一点点 #学习永无止境 #angularjs

angularjs 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在AngularJS应用中如何使用内置的信任机制安全地绑定HTML内容，包括直接信任、信任函数及信任过滤器三种方法。

1、内部域直接信任

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

2、内部域信任函数

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

3、信任过滤器

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);