• angularJS1笔记-(17)-ng-bind-html指令


    angular不推荐大家在绑定数据的时候绑定html,但是如果你非要这么干也并不是不可以的。举个例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    
    </head>
    <body ng-app ng-init="username='<h1>shit</h1>'">
    <!--ng-bind指令在绑定的值包含html时会转义,为了安全(跨站脚本攻击)-->
    <strong ng-bind-html="username"></strong>
    
    <script src="app/bower_components/angular/angular.js"></script>
    
    </body>
    </html>
    

      写这样的一段代码在浏览器运行:

          会看到错误信息:

      看意思是在一个安全的环境中使用了不安全的值导致的,这个时候我们需要引入angular的一个依赖包 angular-sanitize:

    引入完成后我们导入项目,然后在模块中写明依赖:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
    
    </head>
    <body ng-app="myApp" ng-init="username='<h1>shit</h1>'">
    <!--ng-bind指令在绑定的值包含html时会转义,为了安全(跨站脚本攻击)-->
    <strong ng-bind-html="username"></strong>
    
    <script src="app/bower_components/angular/angular.js"></script>
    <script src="app/bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script>
        //使用自定义的模块才可以依赖别的包里面定义模块 angular定义的默认模块没有任何依赖
        angular.module('myApp', ['ngSanitize'])
    </script>
    </body>
    </html>
    

      此时运行就可以看到正确结果ngSanitize的作用是让html不转义:

  • 相关阅读:
    HandlerExceptionResolver 实现全局异常捕获
    Cocoapods安装过程
    mysql 安装
    崩溃日志的字段简单说明
    简述static关键字、void与void *(void指针)、函数指针
    在python后台如何将客户端提交的form表单数据提取出来?
    iOS如何提高页面流畅度
    屏幕显示机制
    计算机网络体系小知识
    Protobuf java版本安装步骤
  • 原文地址:https://www.cnblogs.com/yk123/p/6953338.html
Copyright © 2020-2023  润新知