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>
  • 相关阅读:
    大型网站核心架构因素
    大型网站架构模式
    博客中的文章归档是如何实现的
    Caused by: java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp
    git分支开发的好处
    layui之日期和时间组件
    vue-electron脚手架
    springboot1.5.4 配置druid1.1.0(使用druid-spring-boot-starter)
    Node.js读取文件内容并返回值(非异步)
    C# ftp ListFilesOnServer
  • 原文地址:https://www.cnblogs.com/xiaolei1004/p/angular_sce.html
Copyright © 2011-2022 走看看