Angularjs 1.3在页面中输出带Html标记的文本
如何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>