ng-bind-html 的使用
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 的使用的更多相关文章
- AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
- 【转载】AngularJs 指令directive之controller,link,compile
关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...
- angular(常识)
我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...
- AngularJS开发指南4:指令的详解
指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...
- angularjs 指令(directive)详解(1)
原文地址 什么是directive?我们先来看一下官方的解释: At a high level, directives are markers on a DOM element (such as an ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- Directive Definition Object
不知道为什么这个我并没有想翻译过来的欲望,或许我并没有都看熟透,不好误人子弟,原版奉上. Here's an example directive declared with a Directive D ...
- AngularJS的启动引导过程
原文:http://www.angularjs.cn/A137?utm_source=ourjs.com 目录: 引导之前 自动引导启动框架 手工引导启动框架 引导第1步:创建注入器 引导第2步:创建 ...
- Angular指令(一)
Angular开发者手册重点翻译之指令(一) 创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它. 什么是指令 在高的层面上讲,指令是DOM元素中的 ...
- Scope Directive
---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/sc ...
随机推荐
- JDBC开发模式
一]代码模块———Demo.java public class Demo { private static Connection connection; private static Statemen ...
- POJ 2540 Hotter Colder
http://poj.org/problem?id=2540 题意:给你每次行走的路径,而且告诉你每次离一个点光源是远了还是近了,要求每次光源可能存在的位置的面积. 思路:如果出现"same ...
- SPOJ220 Relevant Phrases of Annihilation
http://www.spoj.com/problems/PHRASES/ 题意:给n个串,求n个串里面都有2个不重叠的最长的字串长度. 思路:二分答案,然后就可以嘿嘿嘿 PS:辣鸡题目毁我青春,一开 ...
- 【转】使用 vim + ctags + cscope + taglist 阅读源码
原文网址:http://my.oschina.net/u/554995/blog/59927 最近,准备跟学长一起往 linux kernel 的门里瞧瞧里面的世界,虽然我们知道门就在那,但我们还得找 ...
- bzoj4003
http://www.lydsy.com/JudgeOnline/problem.php?id=4003 可合并堆. 每个点都有一个小根堆,记住可以到这个点的骑士有哪些,以战斗力为关键字. 从底层到顶 ...
- POJ2828---线段树与逆序数&&DUTOJ1210---逆序对构造排列
来看这样一道问题:http://acm.dlut.edu.cn/problem.php?id=1210 题目大意:对于一个1-n的排列,a1,a2,a3,a4...an我们把满足i < j,ai ...
- css备忘录(关于relative、absolute)
父级用:position: relative; 子级才能用:position: absolute; relative里面用margin调位置: absolute里面用top.left.right.bo ...
- Linux下的文件查找类命令(转载)
如何快速有效的定位文件系统内所需要查找的文件呢?Linux为我们提供了一些文件查找类的命令,我们需要掌握以下几个命令: http://blog.csdn.net/sailor201211/articl ...
- JAVA中运用数组的四种排序方法
JAVA中在运用数组进行排序功能时,一般有四种方法:快速排序法.冒泡法.选择排序法.插入排序法. 快速排序法主要是运用了Arrays中的一个方法Arrays.sort()实现. 冒泡法是运用遍历数组进 ...
- JavaScript 克隆对象
function clone(origin) { return Object.assign({}, origin); } let aClone = { ...a }; // 等同于 let aClon ...