對angularJs中$sce服務(wù)安全顯示html文本的實例
更新時間：2018年09月30日 11:08:14 作者：泠泠在路上
今天小編就為大家分享一篇對angularJs中$sce服務(wù)安全顯示html文本的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<div ng-app="module" ng-controller="ctrl">
{{data}}
<hr>
<div ng-bind-html="data"></div>
<hr>
<div ng-bind-html="title | trustHtml"></div>
</div>
<script>
var m = angular.module('module', []);
/*$sce服務(wù)寫成過濾器*/
m.filter('trustHtml',['$sce',function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}])
m.controller('ctrl', ['$scope', '$sce', function ($scope, $sce) {
/*第一種：不用過濾器的方式*/
$scope.data = $sce.trustAsHtml('<h1 style="color:red;">angularJs</h1>');
/*第二種：使用過濾器的方式*/
$scope.title = '<h3 style="color:red;">angularJs</h3>';
}]);
</script>
以上這篇對angularJs中$sce服務(wù)安全顯示html文本的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了angular使用bootstrap方法手動啟動的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Angular.js基礎(chǔ)學(xué)習(xí)之初始化
這篇文章主要介紹了Angular.js基礎(chǔ)學(xué)習(xí)之初始化的相關(guān)資料，AngularJS 啟動有兩種方式，一種是綁定初始化，自動加載，另外一種是手動初始化，文中介紹的很詳細，需要的朋友可以參考下。2017-03-03
AngularJS基礎(chǔ) ng-copy 指令實例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下2016-08-08
本篇文章主要介紹了淺談Angular文字折疊展開組件的原理分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
MODULE_INITIALIZER初始化Angular?懶加載模塊高級技巧
這篇文章主要為大家介紹了MODULE_INITIALIZER初始化Angular懶加載模塊高級技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
通過實例代碼給大家詳細講述了angular動態(tài)表單的制作方法，對此有需要的朋友參考下。2018-02-02
解決三元運算符 報錯“SyntaxError: can''''t assign to conditional expre
在本篇文章里小編給大家整理的是關(guān)于python三元運算符 報錯“SyntaxError: can't assign to conditional expression”的處理方法，需要的朋友們學(xué)習(xí)下。2020-02-02
AngularJS實現(xiàn)分頁顯示數(shù)據(jù)庫信息
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)分頁顯示數(shù)據(jù)庫信息效果的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07
Angularjs 實現(xiàn)移動端在線測評效果(推薦)
這篇文章主要介紹了Angularjs 實現(xiàn)移動端在線測評效果,需要的朋友可以參考下2017-04-04
ng2學(xué)習(xí)筆記之bootstrap中的component使用教程
現(xiàn)在angular2已經(jīng)除了集成的angular-cli，建議大家可以基于這個來快速開發(fā)ng2的項目，不用自己再搭建環(huán)境。接下來通過本文給大家介紹 bootstrap中的component使用教程,需要的朋友可以參考下2017-03-03