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>

 

posted @ 2015-02-04 13:50  yshy  阅读(15260)  评论(1)  编辑  收藏  举报