zoukankan      html  css  js  c++  java
  • angular用$sce服务来过滤HTML标签

      angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。它可以通过使用$sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。

     1   .controller('HealthEducationDetailCtrl', ['$sce','$scope', 'Storage', '$state', 'HomeService','$stateParams','$ionicTabsDelegate',
     2     function ($sce,$scope, Storage, $state, HomeService,$stateParams,$ionicTabsDelegate) {
     3       $scope.$on('$ionicView.beforeEnter', function() {
     4         //关闭所有的tab选项卡
     5         $ionicTabsDelegate.showBar(false);
     6       });
     7 
     8       //保证健康教育详情页面可以显示各自的标题
     9       $scope.title=$stateParams.ARTICLE_TITLE;
    10       var ARTICLE_ID=$stateParams.ARTICLE_ID;
    11       var param={ARTICLE_ID:ARTICLE_ID};
    12       HomeService.getHealthArticleDetail(param);
    13       //加载健康教育详情
    14       $scope.healthArticleDetail=[];
    15       $scope.$on('HomeService.getHealthArticleDetail',function (event, data) {
    16         $scope.healthArticleDetail=data;
    17         //richTextReplace是解析html标识符
    18         // $scope.trustHtml=Storage.richTextReplace($scope.healthArticleDetail.ARTICLE_CONTENTS);
    19         $scope.trustHtml=$sce.trustAsHtml($scope.healthArticleDetail.ARTICLE_CONTENTS);
    20       })
    21 
    22       $scope.$on('$ionicView.beforeLeave', function() {
    23         //打开所有tab选项卡
    24         $ionicTabsDelegate.showBar(true);
    25       });
    26     }])

    html code:

    1 <ion-view view-title="{{title}}" ng-view-title="title">
    2   <ion-content >
    3     <div style=" 100%; padding: 10px 15px;">
    4       <div ng-bind-html="trustHtml"></div>
    5     </div>
    6   </ion-content>
    7 </ion-view>
  • 相关阅读:
    bzoj3280
    bzoj3876
    洛谷 p1625
    bzoj1407
    bzoj1227
    bzoj1477 && exgcd学习笔记
    bzoj1345
    c#程序的config文件问题
    思维角度的重要性
    python异步初步窥探
  • 原文地址:https://www.cnblogs.com/xiaolei1004/p/angular_sce.html
Copyright © 2011-2022 走看看