zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    爬取阳光问政平台
    CrawlSpider爬取腾讯招聘信息
    LinkExtractor
    镜像源列表
    screen命令总结
    PHP解决中文乱码问题
    Linux查找大文件或目录
    CentOS6/7系列防火墙管理
    删除win10冗余的服务
    解决win10安装wireshark新版本,欢迎界面卡顿情况
  • 原文地址:https://www.cnblogs.com/yshyee/p/4272180.html
Copyright © 2011-2022 走看看