AngualrJS 提供了指令ng-bind-html 用于绑定包含HTML标签的文档,使用方式:

<ANY
ng-bind-html="">
...
</ANY>

测试案例:

index.html

<div ng-controller="TestCtrl">
<div>
<p ng-bind-html="myHTML"></p>
</div>
</div>

index.js

var myApp = angular.module('myApp', []);

myApp.controller('TestCtrl', ['$scope', function($scope){
$scope.myHTML = '<strong>Hot</strong>';
}]);

浏览器输出下面错误:

angular.js:11598 Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
http://errors.angularjs.org/1.3.11/$sce/unsafe
at file:///home/y/my_temp/angular_test/web/app/js/angular.js:63:12
at htmlSanitizer (file:///home/y/my_temp/angular_test/web/app/js/angular.js:15053:13)
at getTrusted (file:///home/y/my_temp/angular_test/web/app/js/angular.js:15217:16)
at Object.sce.(anonymous function) [as getTrustedHtml] (file:///home/y/my_temp/angular_test/web/app/js/angular.js:15897:16)
at Object.ngBindHtmlWatchAction [as fn] (file:///home/y/my_temp/angular_test/web/app/js/angular.js:20449:29)
at Scope.$digest (file:///home/y/my_temp/angular_test/web/app/js/angular.js:14230:29)
at Scope.$apply (file:///home/y/my_temp/angular_test/web/app/js/angular.js:14493:24)
at bootstrapApply (file:///home/y/my_temp/angular_test/web/app/js/angular.js:1449:15)
at Object.invoke (file:///home/y/my_temp/angular_test/web/app/js/angular.js:4182:17)
at doBootstrap (file:///home/y/my_temp/angular_test/web/app/js/angular.js:1447:14)angular.js:11598 (anonymous function)angular.js:8548 (anonymous function)

查阅官方文档要使用:$sanitize服务

Note: If a $sanitize service is unavailable and the bound value isn't explicitly trusted, you will have an exception (instead of an exploit.)

在angular.module中配置sanitize服务:

var myApp = angular.module('myApp', ['ngSanitize']);

再次刷新浏览器,输出以下错误信息:

 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngSanitize due to:
Error: [$injector:nomod] Module 'ngSanitize' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.11/$injector/nomod?p0=ngSanitize
at file:///home/y/my_temp/angular_test/web/app/js/angular.js:63:12
at file:///home/y/my_temp/angular_test/web/app/js/angular.js:1764:17
at ensure (file:///home/y/my_temp/angular_test/web/app/js/angular.js:1688:38)
at module (file:///home/y/my_temp/angular_test/web/app/js/angular.js:1762:14)
at file:///home/y/my_temp/angular_test/web/app/js/angular.js:4094:22
at forEach (file:///home/y/my_temp/angular_test/web/app/js/angular.js:323:20)
at loadModules (file:///home/y/my_temp/angular_test/web/app/js/angular.js:4078:5)
at file:///home/y/my_temp/angular_test/web/app/js/angular.js:4095:40
at forEach (file:///home/y/my_temp/angular_test/web/app/js/angu

发现angular.js没有sanitize模块,在这里将

angular-sanitize.js加载进来就可以了。
<script src="../js/angular-sanitize.js"></script>

ng-bind-html 的使用的更多相关文章

  1. AngularJS进阶学习

    参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...

  2. 【转载】AngularJs 指令directive之controller,link,compile

    关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...

  3. angular(常识)

    我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...

  4. AngularJS开发指南4:指令的详解

    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...

  5. angularjs 指令(directive)详解(1)

    原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...

  6. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  7. Directive Definition Object

    不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...

  8. AngularJS的启动引导过程

    原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...

  9. Angular指令(一)

    Angular开发者手册重点翻译之指令(一) 创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的 ...

  10. Scope Directive

    ---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...

随机推荐

  1. Linux企业级项目实践之网络爬虫(6)——将程序设计成为守护进程

    在linux或者unix操作系统中在系统的引导的时候会开启很多服务,这些服务就叫做守护进程.为了增加灵活性,root可以选择系统开启的模式,这些模式叫做运行级别,每一种运行级别以一定的方式配置系统. ...

  2. Xcode7中你一定要知道的炸裂调试神技(转)

    1.Address Sanitizer: 妈妈再也不用担心 EXC_BAD_ACCESS? EXC_BAD_ACCESS一直是很多开发者的噩梦,因为这个错误很不直观,出现后往往要花很长时间才能定位到错 ...

  3. hdu 4983 Goffi and GCD(欧拉函数)

    Problem Description Goffi is doing his math homework and he finds an equality on his text book: gcd( ...

  4. Webservice-Java-Xfire

    最近公司最近需要将以前提供出去的接口统一用一个标准来实现,考虑到webservice这个是标 准,因此我花时间大概学习了一下webservice,也对JAVA的几个webservice框架进行了一些小 ...

  5. mybatis重拾---部署官方demo

    学习一个框架,个人认为不是从什么start開始.而是从官方的demo開始,先将demo跑起来,了解到这个框架做了什么.能够实现那些功能.对框架有了一个总体的宏观概念! demo看得差点儿相同后再看官方 ...

  6. pagefile.sys怎么删除

    pagefile.sys是虚拟内存文件,目地是使用一部分硬盘空间来充当内存使用.当一个程序请求的内存空间大于物理内存时,就需要pagefile.sys文件来提供较大的虚拟内存,从而满足程序对大内存的需 ...

  7. Property与Attribute的区别

    Property属于面向对象的范畴----属性 Attribute则是编程语言文法层面的东西----特征          Property属于面向对象的范畴.在使用面向对象编程的时候,常常需要对客观 ...

  8. WIN7下使用.net(C#)监视剪贴板 (转)

    最近需要做一个小程序,需要常驻后台,监视剪贴板变化并提取内容, 在网上查了一些资料,先采用SetClipboardViewer方法实现,具体原理可以参考http://www.cnblogs.com/j ...

  9. No2_1.接口继承多态_Java学习笔记_接口

    接口.继承与多态 1.继承和多态是面向对象开发语言中的重要一个环节,使用得当,可以将整个程序的架构变得非常有弹性,减少代码冗余: 2.继承:复用定义好的类: 3.多态:可以动态调整对象的调用,降低对象 ...

  10. 【译】神经网络与深度学习 Ch1-Section0

    用神经网络识别手写数字 人类的视觉系统是是大自然的奇迹.考虑下面手写数字序列: 大多数人能够轻易地是识别出是504192.在我们大脑的每个半球都有一个基础的皮质,这就是我们熟知的V1区,它包含了14亿 ...