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>
时间: 2024-11-02 03:48:25

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

Scope Directive

---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/scope What are Scopes? Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hiera

Angular JS 作用域和数据绑定

作用域 作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是视图和控制器之间的胶水.在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS. 基于动态绑定,我们在修改视图数据时立刻更新$scope,而$scope发生变化时也会立刻渲染视图. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

angular学习(十二)—— Directive

directive介绍 directive是DOM元素上的标记,告诉angularjs的HTML编译器($complile)给DOM元素附加上一些特殊的行为,或者是改变DOM元素和它的子元素. 看到编译两个字,很多人会感到很懵,javascript不是解释执行的吗.其实这里的编译是因为,给html附加directive的递归过程很像是编译源代码的过程,所以才叫编译. angularjs内置了一套directive,像ngBind, ngModel和ngClass.就像你创建controller和

ASP.NET MVC4+BootStrap 实战(六)

最近面试了一个西安电子科技大学刚毕业的,不是计算机系毕业,却喜欢编程.除了书本上的知识以外,其他一窍不通,笔试题答得不错.经验欠佳,编程也只懂书本上的一些例子.本来不打算录用,但是后来聊到高等数学和物理是她学的最好的两门,那必须收下.人家都说了能考上西电,就能证明她的学习能力,我和项目经理也就相信人家了.毕竟当年面试的时候我面试的是南京擎天科技,有个西电的面试的是南京联创,人家和我聊了两句,得知我是二本院校的,人家说了句他同学面试的都是腾讯,阿里,百度,新浪,说完直接放弃面试,我去南京擎天还害怕

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

关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的地方,指令命名时用驼峰规则,使用时用-分割各单词.如:定义myDirective,使用时 像这样:<my-directive>. 这里列出directive的合法命名: ng:bind ng-bind ng_bind x-ng-bind data-ng-bind 我是教师,在新建试题输入分数的时候

【转】AngularJS——自定义指令

原文链接:http://www.html-js.com/article/1561 创建自定义指令 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令

angularJS学习笔记(二)

前言 首先,了解 一下ng的一些概念: module 代码的组织单元,其它东西都是定义在具体的模块中的. app 应用业务,需要多个模块的配合完成. service 仅在数据层面实现特定业务功能的代码封装 controller 与DOM结构相关联的东西,即是一种业务封装概念,又体现了项目组织的层级结构 filter 改变数据的一种机制 directive 与DOM结构相关联,特定功能的封装形式 上面的这些概念基本上就是ng的全部.每一部分都可以自由定义,使用时通过各种要素的相互配合来实现我们的业

[转载]AngularJS学习笔记

http://www.zouyesheng.com/angular.html 关于AngularJS 关于本文档 开始的例子 依赖注入 作用域 数据绑定与模板 6.1. 数据->模板 6.2. 模板->数据 6.3. 数据->模板->数据->模板 模板 7.1. 定义模板内容 7.2. 内容渲染控制 7.3. 节点控制 7.4. 事件绑定 7.5. 表单控件 模板中的过滤器 8.1. 排序 orderBy 8.2. 过滤列表 filter 8.3. 其它 8.4. 例子:表头

angular 表达式与指令

angular表达式的一些特点 属性表达式: 属性表达式是对应于当前作用域,Javascript对应的是全局window对象. AngularJS要使用window作用域的话得用$window来指向全局window对象. 比如说,你使用window中定义的alert()方法,在AngularJS表达式中必须写成$window.alert()才行 允许未定义值 执行表达式时,AngularJS能够允许undefined或者null,不像Javascript会抛出一个异常 不能在AngularJS表

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

指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”. 指令可以做为HTML中的元素名,属性名,类名,或者注释.下面是一些等效调用myDir指令的例子: <span my-dir="exp"></span> <span class=&