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语言之循环基础；各个语句的区别

    FOR: WHILE DO WHILE break 与 continue的区别 break直接中断语句跳出循环,continue跳出当前循环,后面会继续执行

  2. 20165306 Exp4 恶意代码分析

    Exp4 恶意代码分析 一.实践概述 1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生 ...

  3. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  4. Jmeter 获取系统时间，和对系统时间进行增减时间

    今天做了一个测试,比如发送短信验证码之后的, 验证90s被验证码有效的问题 那如何测试开发的代码,判断了90s内有效呢1. 验证码获取时间距离现在89秒,验证通过2. 验证码获取时间距离现在90秒,验 ...

  5. Kotlin 类和对象

    类定义 Kotlin 类可以包含:构造函数和初始化代码块.函数.属性.内部类.对象声明. Kotlin 中使用关键字 class 声明类,后面紧跟类名: class Runoob { // 类名为 R ...

  6. CF Manthan, Codefest 16 B. A Trivial Problem

    数学技巧真有趣,看出规律就很简单了 wa 题意:给出数k  输出所有阶乘尾数有k个0的数 这题来来回回看了两三遍, 想的方法总觉得会T 后来想想  阶乘 emmm  1*2*3*4*5*6*7*8*9 ...

  7. QT qss资源文件与代码分离

    在最近的Qt相关项目开发中,有不同客户提出更改logo图片的需求,每次更换一张图片需要重新添加到.qrc资源文件,并重新编译源代码生产可执行文件,操作效率极低,频繁修改源代码也 容易引起其他不可靠问题 ...

  8. vue 渲染后更新数据

    this.$set(this.selGetData,level,[{},{}])this.$set(this.selGetData,1,{message:"Test add attr&quo ...

  9. 【macOS】 在OpenCV下训练Haar特征分类器

    本教程基于以下环境 macOS 10.12.6,OpenCV 3.3.0,python 3.6.由于网上基于masOS系统的教程太少,想出一篇相关教程造福大家-本文旨在学习如何在opencv中基于ha ...

  10. 虚拟机centos7 基础模板制作

    用于新模板制作,主要针对一些基本组件的安装 分区.安装不在此赘述 最小化安装centos7-minimal-1810 1.安装wget yum install wget -y 2.更换aliyun源 ...