angularjs解析html-angular-sanitize

PHPABC angularjs 1,029 次浏览 , 没有评论

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
总结

$sce过滤器+ng-bind-html就可以显示html文本了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go