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