angularjs显示html文本

Angularjs中输出变量使用“{{}}”或者“ng-bind”，但是如果变量中有html代码的话，angularjs为了xss安全，默认是不解析html，直接原样显示html代码。

如果需要显示解析后的html代码，需要使用angular-sanitize模块。

控制器代码

 
 
demo.controller('Demo13Controller', [
	'$scope', function($scope) {
		$scope.html = '<span style="color: red">这是格式化的HTML文本</span>';
	}
]);

视图代码

 
 
<article class="demo13" ng-controller="Demo13Controller">
 <h2><a name="demo13">13.显示HTML文本</a></h2>
 <div class="demo13-content">
 <p>需要显示的文本：{{html}}</p>
 <p>Html格式化文本： <span ng-bind-html="html|htmlContent"></span></p>
 </div>
 </article>

htmlContent过滤器代码

 
 
demo.filter('htmlContent',['$sce', function($sce) {
	return function(input) {
		return $sce.trustAsHtml(input);
	}
}]);

线上demo：http://ngdemo.sinaapp.com/#demo13