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. jQuery添加删除

    //代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl ...

  2. Maven构建 SpringMVC+Spring+MyBatis 环境整合

    目录 1. Maven 项目搭建 2. Maven 插件生成 MyBatis 代码 3. 待续 ... 开发环境 开发环境请尽量保持一致,不一致的情况可能存在问题. JDK 1.7 MyEclipse ...

  3. python程序—名片管理系统

    创建一个名片管理系统,实现增.删.改.查.四项功能 listcard = [] while True: print('**********欢迎来到名片管理系统**********') print(' ...

  4. 读书笔记--《编写高质量代码：改善Python程序的91个建议》

      第一章 引论 建议写Pythonic式的代码,我理解为充分利用pythonAPI,用最简洁方式写出代码 1.两个变量交换: a, b = b, a 2.翻转list: a = [1, 2, 3, ...

  5. 小程序之 swiper高度根据图片高度变化

    今天做的是这个效果⬇️  swiper的高度根据图片的高度而改变 wxml:<swiper indicator-dots="{{indicatorDots}}" vertic ...

  6. Kotlin 继承

    Kotlin 中所有类都继承该 Any 类,它是所有类的超类,对于没有超类型声明的类是默认超类: class Example // 从 Any 隐式继承 Any 默认提供了三个函数: equals() ...

  7. Ant Design of React 框架使用总结1

    一.  为什么要用UI 框架 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的. 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标 ...

  8. bs4 FeatureNotFound: Couldn't find a tree builder with the features you requested: lxml. Do you need to install a parser library?

    安装beautifulsoup后,运行测试报错 from urllib import requestfrom bs4 import BeautifulSoup url = "http://w ...

  9. 创建X个任意元素数组并且可以遍历的的一个方法

    方法一: Array.apply(null, { length: 20 })分析:apply 第二个参数应该是数组,现在把 { length: 20 } 转化为数组,就是一个长度为X的数组(类数组对象 ...

  10. c#格林治时间实现

    C#时间戳的简单实现   Introduction: 在项目开发中,我们都经常会用到时间戳来进行时间的存储和传递,最常用的Unix时间戳(TimeStamp)是指格林尼治时间1970年1月1日0时(北 ...