對angularJs中$sce服務安全顯示html文本的實例
更新時間：2018年09月30日 11:08:14 作者：泠泠在路上
今天小編就為大家分享一篇對angularJs中$sce服務安全顯示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服務寫成過濾器*/
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服務安全顯示html文本的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Angular指令封裝jQuery日期時間插件datetimepicker實現(xiàn)雙向綁定示例
這篇文章主要介紹了Angular指令封裝jQuery日期時間插件datetimepicker實現(xiàn)雙向綁定示例，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
詳解Angular 中 ngOnInit 和 constructor 使用場景
最初學習Angular的時候總是搞不清楚ngOnInit和constructor的區(qū)別，現(xiàn)在我們來稍微理一下兩者之間的區(qū)別。2017-06-06
這篇文章主要介紹了AngularJS自定義控件,結合實例形式詳細分析了AngularJS自定義指令與模板操作的相關函數(shù)與使用技巧,需要的朋友可以參考下2016-12-12
今天小編就為大家分享一篇angularJS實現(xiàn)不同視圖同步刷新詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
angular同一頁面跳轉重新執(zhí)行的實現(xiàn)方法
這篇文章主要介紹了angular同一頁面跳轉重新執(zhí)行的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本篇文章主要介紹了angular4 如何在全局設置路由跳轉動畫的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章主要介紹了淺談angular2 組件的生命周期鉤子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文主要講解了Angular的路由動畫和高階動畫函數(shù)，對此感興趣的同學，可以把代碼親自實驗一下，理解其原理。2021-05-05
本文通過實例代碼給大家介紹了angular實現(xiàn)下載安裝包的功能以及基于angularjs代碼實現(xiàn)錨點跳轉的功能，需要的朋友參考下吧2017-09-09
ngrx是一套利用RxJS的類庫，下面這篇文章主要給大家介紹了關于Angular X中使用ngrx的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07