1、直接使用$sce服务(angularjs中：$sce.trustAsHtml($scope.snippet)。html：ng-bind-html="snippet")

以下代码输出：

 <div ng-bind-html="snippet"></div>

 <script>

 　　angular.module('sanitizeExample', [])

 　　.controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {

 　　　　　　　　//测试用字符串

              $scope.snippet =

                '<p style="color:blue">an html\n' +

                '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +

                'snippet</p>';

 　　　　　　　　//$sce 服务trustAsHtml 进行编译

              $scope.deliberatelyTrustDangerousSnippet = function() {

                return $sce.trustAsHtml($scope.snippet);

              };

      }]);

 </script>

2、使用angular-sanitize.js 模块中的$sanitize服务，信任字符串，直接显示html

以下代码输出：

 <div ng-bind-html="snippet"></div>

 <script>

 　　angular.module('sanitizeExample', ['ngSanitize'])

 　　.controller('ExampleController', ['$scope', function($scope) {

 　　　　　　　　//测试用字符串

              $scope.snippet =

                '<p style="color:blue">an html\n' +

                '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +

                'snippet</p>';

      }]);

 </script>

3、整体demo代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body ng-app="sanitizeExample">

     <div ng-controller="ExampleController">

         Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>

        <table>

          <tr>

            <td>Directive</td>

            <td>How</td>

            <td>Source</td>

            <td>Rendered</td>

          </tr>

          <tr id="bind-html-with-sanitize">

            <td>ng-bind-html</td>

            <td>Automatically uses $sanitize</td>

            <td><pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre></td>

            <td><div ng-bind-html="snippet"></div></td>

          </tr>

          <tr id="bind-html-with-trust">

            <td>ng-bind-html</td>

            <td>Bypass $sanitize by explicitly trusting the dangerous value</td>

            <td>

            <pre>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;&lt;/div&gt;</pre>

            </td>

            <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>

          </tr>

          <tr id="bind-default">

            <td>ng-bind</td>

            <td>Automatically escapes</td>

            <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>

            <td><div ng-bind="snippet"></div></td>

          </tr>

        </table>

        </div>

 <script>

 angular.module('sanitizeExample', ['ngSanitize'])

            .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {

              $scope.snippet =

                '<p style="color:blue">an html\n' +

                '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +

                'snippet</p>';

              $scope.deliberatelyTrustDangerousSnippet = function() {

                return $sce.trustAsHtml($scope.snippet);

              };

            }]);

 </script>

 </body>

 //修改为本地angular.js 相对地址

 <script src="angular.min.js" type="text/javascript"></script>

 <script src="angular-sanitize.js" type="text/javascript"></script>

 </html>

5、AngularJS 直接绑定显示html （$sce、$sanitize服务）的更多相关文章

  1. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  2. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

  3. AngularJS参数绑定 --AngularJS

    AngularJS参数绑定有三种方式.第一种插值表达式“{{}}”表示,第二种在标签中使用ng-bind属性表示,第三种针对input框(标签)的ng-module属性表示.针对三种参数绑定方式,设定 ...

  4. angular-ngSanitize模块-$sanitize服务详解

    本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和 ...

  5. 【AngularJS学习笔记】01 指令、服务和过滤器

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...

  6. AngularJS进阶(四十)创建模块、服务

    AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...

  7. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  8. AngularJS事件绑定的使用详解

    本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助. 1.绑定事件:表达式.事件方法名: 2.绑定点击事件实例:显示.隐藏页面 ...

  9. AngularJS中实现显示或隐藏动画效果的3种方式

    本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...

随机推荐

  1. Java基本语法(一)

    1,Java中命名规则与规范 命名规则是我们必须遵守的约定: 1,Java中需要命名的地方(我们称之为标识符),可以26个英文字母(不区分大小写),0-9的数字,_和$等组成,不能包含特殊字符(#), ...

  2. ios开启双重认证之填坑式教学

    2019.03.01.阳光明媚(不,,,有些雾霾..) 本来打算发布一个新版本app,修复一些小小bug, 然而,打包出错了,,错误是显示账号无连接.. 顿时慌出了天际,,以为是账号的证书问题,,最烦 ...

  3. 从Scratch到Python:会动的小猫

    大部分人提起儿童编程,就会想到Scratch,然而当儿童升入中学,学习什么语言比较合适呢?我认为,Python是未来的方向,为此我将会把一些经典的Scratch案例用Python重新实现,抛砖引玉,希 ...

  4. The threat to world

    The threat to world 对世界贸易的威胁"> The rules-based system is in grave(严重的) danger 基于规则的体系岌岌可危 DO ...

  5. 关于python中loc和iloc方法

    pandas以类似字典的方式来获取某一列的值 import pandas as pd import numpy as np table = pd.DataFrame(np.zeros((4,2)), ...

  6. Go语言学习之15 商品秒杀开发与接入层实现

    outline 1. 秒杀抢购接入层实现2. 秒杀逻辑层实现 秒杀接入层核心功能 秒杀逻辑层核心功能 SecKill接口 /seckill?product=20&source=android& ...

  7. Active Record Query Interface 数据查询接口（界面） 看到第8节。

    http://guides.rubyonrails.org/active_record_querying.html ✅How to find records using a variety of me ...

  8. 工作中遇到的问题——mysql关于年龄，性别的统计

    终于暂时闲下来了,一个项目加班加点一年多,前面太忙就顾不上博客了,慢慢的就懈怠了,最近算是暂时闲下来了,项目已经验收进入后期维护阶段,每天空余的时间也多了,想重新拾起博客,不求写什么高深的东西,以后就 ...

  9. java中，字符串和集合判断是否为空

    字符串: 集合: 不为空

  10. vim搜索及高亮取消

    1. 命令模式下,输入:/字符串 比如搜索user, 输入/user 按下回车之后,可以看到vim已经把光标移动到该字符处和高亮了匹配的字符串 2. 查看下一个匹配,按下n(小写n) 3. 跳转到上一 ...