對(duì)angularJs中$sce服務(wù)安全顯示html文本的實(shí)例

更新時(shí)間：2018年09月30日 11:08:14 作者：泠泠在路上

今天小編就為大家分享一篇對(duì)angularJs中$sce服務(wù)安全顯示html文本的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<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ù)寫(xiě)成過(guò)濾器*/
 m.filter('trustHtml',['$sce',function($sce){
  return function(data){
   return $sce.trustAsHtml(data);
  }
 }])
 m.controller('ctrl', ['$scope', '$sce', function ($scope, $sce) {
 /*第一種：不用過(guò)濾器的方式*/
  $scope.data = $sce.trustAsHtml('<h1 style="color:red;">angularJs</h1>');
   /*第二種：使用過(guò)濾器的方式*/
  $scope.title = '<h3 style="color:red;">angularJs</h3>';
 }]);
</script>

以上這篇對(duì)angularJs中$sce服務(wù)安全顯示html文本的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼
本篇文章主要介紹了angular使用bootstrap方法手動(dòng)啟動(dòng)的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07
Angular.js基礎(chǔ)學(xué)習(xí)之初始化
這篇文章主要介紹了Angular.js基礎(chǔ)學(xué)習(xí)之初始化的相關(guān)資料，AngularJS 啟動(dòng)有兩種方式，一種是綁定初始化，自動(dòng)加載，另外一種是手動(dòng)初始化，文中介紹的很詳細(xì)，需要的朋友可以參考下。
2017-03-03
AngularJS基礎(chǔ) ng-copy 指令實(shí)例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下
2016-08-08
淺談Angular文字折疊展開(kāi)組件的原理分析
本篇文章主要介紹了淺談Angular文字折疊展開(kāi)組件的原理分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
MODULE_INITIALIZER初始化Angular?懶加載模塊高級(jí)技巧
這篇文章主要為大家介紹了MODULE_INITIALIZER初始化Angular懶加載模塊高級(jí)技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
angular動(dòng)態(tài)表單制作
通過(guò)實(shí)例代碼給大家詳細(xì)講述了angular動(dòng)態(tài)表單的制作方法，對(duì)此有需要的朋友參考下。
2018-02-02
解決三元運(yùn)算符報(bào)錯(cuò)“SyntaxError: can''''t assign to conditional expre
在本篇文章里小編給大家整理的是關(guān)于python三元運(yùn)算符報(bào)錯(cuò)“SyntaxError: can't assign to conditional expression”的處理方法，需要的朋友們學(xué)習(xí)下。
2020-02-02
AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息效果的相關(guān)資料，感興趣的小伙伴們可以參考一下
2016-07-07
Angularjs 實(shí)現(xiàn)移動(dòng)端在線測(cè)評(píng)效果(推薦)
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)移動(dòng)端在線測(cè)評(píng)效果,需要的朋友可以參考下
2017-04-04
ng2學(xué)習(xí)筆記之bootstrap中的component使用教程
現(xiàn)在angular2已經(jīng)除了集成的angular-cli，建議大家可以基于這個(gè)來(lái)快速開(kāi)發(fā)ng2的項(xiàng)目，不用自己再搭建環(huán)境。接下來(lái)通過(guò)本文給大家介紹 bootstrap中的component使用教程,需要的朋友可以參考下
2017-03-03