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. python程序—利用socket监控端口

    利用socket监控服务器端口,端口不通时,发邮件提醒 import yagmail #导入yagmail模块 import re #导入re模块,进行正则匹配 import socket #导入so ...

  2. 排查OPENSTACK浮动IP被占用记录

    在openstack上新建机器时,发现用户无法登陆. 检查该机器的22端口,返回 Connection refused.   ping该IP,发现可以ping通.   释放该浮动ip,然后去ping该 ...

  3. 本地连接属性：Internet协议版本4(TCP/IPv4)打开闪退解决办法

    1.命令窗口配置网络连接指定IP netsh interface ip set address "本地连接" static IP地址 子网掩码 默认网关 例:netsh inter ...

  4. NRF52832与W25Q80通信

    1 NRF52832SPI主机的功能描述 nRF52832SPIM的主要特征 3个SPI实例 支持SPI的模式0到模式3 支持DMA Individual selection of IO pin fo ...

  5. 【调试】Idea如何远程debug之tomcat war包启动

    一.修改tomcat配置并启动 1.修改tomcat bin目录下的startup.sh配置,定位startup.sh最后一行,使用jpda  start启动 即将exec "$PRGDIR ...

  6. HBuild 连接安卓手机

    设备:一部电脑.一部安卓手机.一条数据线 1.  数据线连接电脑和安卓手机: 2.  安卓手机-->  设置 -- > 开发者选项 --> 点进去,找到USB调试并且打开,例:    ...

  7. 面试题3--数组中的重复数字（new数组的新写法）

    总是忘了一些条件的判断,比如非空或者其他之类. #include<iostream> using namespace std; int Frepeat(int num[],int leng ...

  8. Table 类（数据表基类）

    只修改数据表某条记录的部分字段(究极进化): public class TableHelper { private Dictionary<string, object> temp; pub ...

  9. .NET controller传给view的bool类型

    问题: 在view中访问该变量是False,不是字符串,也不是bool类型的false. 解决方法: controller: ViewBag.Test = false; view中得到false值: ...

  10. element-- 修改MessageBox 弹框 中确定和取消按钮顺序

    需求:修改弹框中的 取消/确定按钮顺序,及头部和底部背景颜色; 原ui效果图 需求ui效果图 方法:对取消及确定按钮自定义类名,样式重写