[AngularJS] Html ngSanitize, $sce

浏览数：169 / 时间：2015年06月09日

Safely render arbitrary HTML snippets by using ngSanitize and $sce.

By default angularJS consider user‘s input html is danger, so if you want to display html tag on the page will show unsafe error.

To remove this error and trust user‘s input, we can install ngSanitize:

bower install angular-sanitize

var egghead = angular.module("egghead", ["ngSanitize"]);

egghead.controller("AppCtrl", function () {
    var app = this;

    app.someHtml = ‘<a href="http://egghead.io" style="color:red">Learn stuff!</strong>‘;
});

<!DOCTYPE html>
<html>
<head>
    <title>Egghead.io</title>
    <link rel="stylesheet" href="bower_components/bootstrap.css/css/bootstrap.css"/>
</head>
<body ng-app="egghead" ng-controller="AppCtrl as app">
<textarea name="" id="" cols="30" rows="10" ng-model="app.someHtml"></textarea>
<div ng-bind-html="app.someHtml"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="app.js"></script>
</body>
</html>

Then the error message has gone, but we didn‘t get the result which we want, we want "Learn stuff" shown in red color:

<a href="http://egghead.io" style="color:red">Learn stuff!</strong>

To overcome this, we can use $sce service:

var egghead = angular.module("egghead", ["ngSanitize"]);

egghead.controller("AppCtrl", function ($sce) {
    var app = this;

    app.someHtml = $sce.trustAsHtml(‘<a href="http://egghead.io" style="color:red">Learn stuff!</strong>‘);
});

Also you can trust as javascript, css && url:

see here: https://docs.angularjs.org/api/ng/service/$sce

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

[AngularJS] Html ngSanitize, $sce