angular1.x 中的$sce/ng-bind-html用法

最新推荐文章于 2021-06-10 11:51:53 发布

han_hanker

最新推荐文章于 2021-06-10 11:51:53 发布

阅读量659

点赞数

分类专栏： angularjs 文章标签： angular

angularjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

向作者致敬

问题提出

但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签
angularJs输出html的时候，浏览器并不解析这些html标签
我们用ng-bind-html这样的指令来绑定，浏览器中显示的还是html代码

解决方案

此时可以通过$sce服务把一些地址变成安全的、授权的链接…简单地说，就像告诉门卫，这个陌生人其实是我的好朋友，很值得信赖，不必拦截它！

解决方法1–过滤器

<body ng-app="myApp" ng-controller="myCtl">
    <div ng-bind-html="htmlContent | to_trusted">

    </div>
</body>
</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtl',['$scope', function($scope){
        $scope.htmlContent = '<h1 style="color: orange">wednesday</h1>';
    }]);
    app.filter('to_trusted', ['$sce', function ($sce) {
　　  return function (text) {
    　　  return $sce.trustAsHtml(text);
　　};
}]);
</script>

解决方法2

<body ng-app="myApp" ng-controller="myCtl">
    <div ng-bind-html="content">

    </div>
</body>
</html>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtl',['$scope','$sce', function($scope,$sce){
        $scope.content = $sce.trustAsHtml( '<h1 style="color: orange">wednesday</h1>' );
    }]);
</script>

han_hanker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular1.x 中的$sce/ng-bind-html用法

向作者致敬问题提出但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签 angularJs输出html的时候，浏览器并不解析这些html标签我们用ng-bind-html这样的指令来绑定，浏览器中显示的还是html代码解决方案此时可以通过$sce服务把一些地址变成安全的、授权的链接…简单地说，就像告诉门卫，这个陌生人其实是我的好朋友，很值得信赖，不必拦截它！解决方法1
复制链接

扫一扫

专栏目录