本篇主要讲解angular中的$sanitize这个服务,此服务依赖于ngSanitize模块,要学习这个服务,先要了解另一个指令:ng-bing-html。
顾名思义,ng-bind-html和ng-bind的区别就是:ng-bind把值作为字符串和元素的内容进行绑定,但是ng-bind-html把值作为html和元素的html进行绑定,相当于jq里面的.text()和.html()。
但是出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理。
处理的方式有两种,一种是使用$sce服务,另一种就是使用$sanitize服务。sce即“Strict Contextual Escaping”的缩写,翻译成中文就是“严格的上下文模式”也可以理解为安全绑定。
$sanitize会根绝一个白名单来净化html标签,这样不安全的内容就不会被返回。白名单是根据$compileProvider的aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist函数得到的。
实例:
<!DOCTYPE html> <html ng-app="myApp"> <head> <title></title> <meta charset="utf-8"> <script src="angular1.2.9.js"></script> <script src="angular-sanitize.js"></script> <script src="app.js"></script> <!-- <link type="text/css" href="../bootstrap.css" rel="stylesheet" /> --> </head> <body> <div class="container"> <table class="table table-bordered" ng-controller="ctrl"> <caption>通过ngSanitize模块的$sanitize服务解析html</caption> <thead> <tr> <th>使用的指令</th> <th>格式化方法</th> <th>指令的写法</th> <th>解析结果</th> </tr> </thead> <tbody> <tr> <td>ng-bind-html</td> <td>使用内置的$sanitize <br/>(不需要出现在js里,只要模型添加了ngSanitize模块, <br/>然后使用ng-bind-html,它的值就自动通过$sanitize编译)</td> <td><pre><div ng-bind-html="myHtml"><br></div></pre></td> <td><div ng-bind-html="myHtml"></div></td> </tr> <tr> <td>ng-bind-html</td> <td>使用$sce的trustAsHtml方法编译<br/>(以后会细讲$sce服务,这里不是重点)</td> <td><pre><div ng-bind-html="trustHtml"><br></div></pre></td> <td><div ng-bind-html="trustHtml"></div></td> </tr> <tr> <td>ng-bind</td> <td>不编译</td> <td><pre><div ng-bind="myHtml"><br></div></pre></td> <td><div ng-bind="myHtml"></div></td> </tr> </tbody> </table> <a class="btn btn-default" href="http://plnkr.co/edit/3FBasliZTRjKs3jwTpoR?p=preview" role="button">plunker</a> </div> </body> </html>
app.js
var app =angular.module('myApp',['ngSanitize']); app.controller('ctrl',function($scope,$sce){ $scope.myHtml = '<p style="color:blue">an html\n' + '<em onclick="this.textContent=\'code_bunny\'">click here</em>\n' + 'snippet</p>'; $scope.trustHtml = $sce.trustAsHtml($scope.myHtml) });
运行效果:
表格第一行:myHtml是一段字符串,但是它的内容是一段html,使用ng-bind-html可以把它作为元素的.html()绑定给元素。在这里我们给模块添加依赖 ‘ngSanitize‘ ,(需要链入angular-sanitize.min.js)。然后使用ng-bind-html,$sanitize会自动对myHtml进行净化。
所以我们看到结果,myHtml是被作为html填充到div里面的,但是不再是原来的myHtml,而是这样的:
可以看到,$sanitize会把标签的属性都移除,以及绑定在元素上的事件,仅保留了标签和内容。
记住,$sanitize指令本身不会出现在js代码里,直接使用ng-bind-html就行了。但如果这里不给模块添加依赖ngSanitize,是会报错的。
表格第二行:trustHtml 是myHtml通过$sce.trustAsHtml() 处理以后的返回值。所以它不再经过$sanitize服务的净化,直接作为元素的.html()绑定给元素,所以我们看到myHtml被完整的填充到了div里,保留了所有的属性和事件,这一行的内容不依赖于ngSanitize模块,$sce服务是内置的。所谓sce即“Strict Contextual Escaping”的缩写,翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。
表格第三行:不使用ng-bind-html指令,当使用ng-bind指令时,绑定的值就作为字符串填充到元素里,这个没什么好讲的。
相关推荐
因此,在你的项目中,你需要首先引入`angular-sanitize.js`文件,然后在你的主模块定义中注入`ngSanitize`服务,例如: ```javascript var myApp = angular.module('myApp', ['ngSanitize']); ``` 一旦你完成了...
<script src="http://cdn.bootcss.com/angular-sanitize/1.3.8/angular-sanitize.min.js"> [ng-cloak]{display:none;} <div ng-controller="Aaa"> <div ng-bind-html="trustedHtml"></div> var m1 = ...
`ngSanitize`包含了一个`$sanitize`服务,它会清除掉HTML字符串中的潜在恶意代码,只保留安全的标签和属性。在上面的示例中,`<h1>`标签被安全地渲染,而任何可能的恶意脚本则会被过滤掉。 ### 语法和参数 `ng-...
少儿编程scratch项目源代码文件案例素材-岩浆生存 双人游戏.zip
2024安全行业大模型技术应用态势发展报告-中国通信标准化协会
scratch少儿编程逻辑思维游戏源码-海上遭遇.zip
少儿编程scratch项目源代码文件案例素材-羊羊繁殖V1.zip
通信行业:“数据要素X”三年行动规划,面向应用场景挖掘数据价值
内容概要:文章详细探讨了数据连接性和云集成在增强汽车电子电气架构(EEA)方面的重要作用。首先介绍了从分布式到集中式架构的技术演进,解释了域集中式和中央集中式架构的优势,如远程软件升级(OTA)、软硬件解耦等。其次,阐述了云平台在远程软件更新、数据存储与分析等方面的支持作用。接着,强调了数据连接性在实时通信、低延迟决策、多模态传感器融合以及工业物联网集成中的核心作用。此外,讨论了云集成在个性化服务、AI助手、自动驾驶训练与仿真、预测性维护等方面的应用。最后,分析了市场需求与政策支持对这一领域的影响,并展望了未来的发展趋势,如5G-A/6G、边缘计算与AI大模型的融合。 适用人群:汽车电子工程师、智能网联汽车行业从业者及相关领域的研究者。 使用场景及目标:①理解汽车电子电气架构从分布式到集中式的演进过程及其带来的优势;②掌握数据连接性和云集成在提升车辆智能化水平的具体应用和技术细节;③了解相关政策法规对智能网联汽车发展的支持与规范;④探索未来技术发展趋势及其可能带来的变革。 其他说明:本文不仅提供了技术层面的深入解析,还结合了实际应用案例,如特斯拉、蔚来、中联重科、约翰迪尔等企业的实践成果,有助于读者全面理解数据连接性和云集成在现代汽车工业中的重要地位。同时,文中提及的政策法规也为行业发展指明了方向。
少儿编程scratch项目源代码文件案例素材-消灭病毒大作战.zip
scratch少儿编程逻辑思维游戏源码-靶子射击.zip
scratch少儿编程逻辑思维游戏源码-飞翔圣诞老人.zip
scratch少儿编程逻辑思维游戏源码-尖刺.zip
少儿编程scratch项目源代码文件案例素材-小圆点.zip
scratch少儿编程逻辑思维游戏源码-疾速逃生.zip
scratch少儿编程逻辑思维游戏源码-火柴人地底冒险.zip
scratch少儿编程逻辑思维游戏源码-吉文战争.zip
scratch少儿编程逻辑思维游戏源码-荒野跑酷.zip
基于java开发的以酒交友的社交APP软件+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 基于java开发的以酒交友的社交APP软件+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于java开发的以酒交友的社交APP软件+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 基于java开发的以酒交友的社交APP软件+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 基于java开发的以酒交友的社交APP软件+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 基于java开发的以酒交友的社交APP软件+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用 基于java开发的以酒交友的社交APP软件+源码,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用