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 - Random常用方法记录

    import random # range [a,b) 不包含b # 获取随机整数 # randrange [a,b) 不包含b a = random.randrange(0, 101, 5) # E ...

  2. Linux机器学习软件配置

    如果需要安装Python+anaconda+pycharm,就不需要单独安装Python了,因为anaconda自带Python https://www.twblogs.net/a/5b7f8c742 ...

  3. 【搬运工】linux下创建用户（一）

    转载:http://www.cnblogs.com/ylan2009/articles/2321177.html linux下创建用户(一) Linux 系统是一个多用户多任务的分时操作系统,任何一个 ...

  4. Docker镜像加速器配置

    一.为什么要配置Docker镜像加速器 因为我们默认pull的docker镜像是从Docker Hub来下载,由于其服务器在国外,速度会比较慢.因此我们可以配置成国内的镜像仓库,这样可以加速镜像的上传 ...

  5. pom.xml配置，针对mvn clean install -P参数（环境参数）打包

    pom.xml配置,针对mvn clean install -P参数(环境参数)打包 比如你有2个环境,一个dev,一个prod, 然后你在mvn打包的时候,可以通过-P来打包,是打dev包,还是pr ...

  6. QTL定位相关

    1.原理 https://www.sohu.com/a/211301179_278730 较为详细

  7. Flutter工程无法找到Android真机或Android模拟器

    之前的Flutter的工程链接真机还好好的 结果电脑抽抽了过了个年就连不到真机了 一点run就提示 No connected devices found; please connect a devic ...

  8. Android模拟器Genymotion使用

    介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的特点,是Android开发.测试等相关人员的必备工具. 官网地址:https://www.genym ...

  9. 小程序批量获取input的输入值，监听输入框，数据同步

    在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事件来同步数据.这样做很麻烦.下面的方法可以解决,只需要一个方 ...

  10. 运用python绘制小猪佩奇

    用python绘制小猪佩奇 1.打开idle 2.点击File-New Files 3.输入以下代码 1. from turtle import * 2. 3. def nose(x,y):#鼻子 4 ...