ng-bind-html 的使用
来源:互联网 发布:羽毛笔哈利波特 淘宝 编辑:程序博客网 时间:2024/05/01 13:47
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>
0 0
- ng-bind-html 的使用
- ng-bind-html和.$compile的使用
- ng-bind-html的作用
- 使用ng-bind-html标签 注意事项
- angularjs中ng-bind-html使用问题
- 1.ng-bind的使用
- ng-bind-html指令
- ionic ng-bind-html
- ionic ng-bind-html
- ng-bind-html指令
- ionic ng-bind-html
- ng-bind ng-bind-html ng-bind-template 区别
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- 解决AngularJS使用ng-bind-html会过滤html中style属性的问题
- AngularJS使用ng-bind-html会过滤html中style属性的问题
- 关于ng-bind-html 指令
- React的dangerouslySetInnerHTML与Angular的ng-bind-html
- 通过ng-bind-html添加html元素
- linux环境编程信号
- 第十二周项目4 - 利用遍历思想求解图问题7
- 干货:经典的大数据问题实例合集!
- 吹蜡烛功能是怎么实现的?
- POJ - 3696 The Luckiest number(求阶)
- ng-bind-html 的使用
- 第12周项目3-图遍历算法实现
- Android 四大组件之广播 -- 红
- 第11周项目1-验证算法(4)哈夫曼编码的算法验证
- Servlet学习之一开发Servlet的三种方法
- 理解临时对象的来源
- notepad++保存后中文乱码的问题
- iOS开发 AFNetworking 关于JSON text did not start with array or object and option to allow fragments not
- (第十二周项目3)图遍历算法实现