如何Angularjs1.3在页面中输出带Html标记的文本

Posted 2020-07-09 蚂蚁撼大象

如何Angularjs1.3在页面中输出带html标记的文本 

基于安全考虑，Angularjs不允许用ng-bind或者{{}}的方法输出html文本。

在实际的应用中，比如信息管理系统，用在线编辑器编辑出来的文章都带有html标记，这种情况下可以用ng-bind-html将其输出到前台页面。

1、在前台页面中包含sanitize.js

<script type="text/javascript" src="webjars/angular-sanitize/1.3.11/angular-sanitize.min.js"></script> 

2、在mode、和controller增加对html文本的安全过滤

 

angular.module(\'scenceApp\',[\'ui.router\',\'ngResource\',\'ngSanitize\',\'restangular\'])
.controller(\'scenceViewController\',function($scope,Restangular,$stateParams, $sce){
    Restangular.one("scences",$stateParams.id).get().
     then(function(data) {
        $scope.scence = data;
        $scope.scence.info = $sce.trustAsHtml(data.info); //对info字段进行安全过滤
     });
})

 

3、在前台页面中用ng-bind-html绑定

<div ng-bind-html="scence.info"></div>

 

文章参考资料：http://www.cnblogs.com/mingziday/p/4824899.html