首页 > 代码库 > [AngularJS] Html ngSanitize, $sce
[AngularJS] Html ngSanitize, $sce
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。