深入理解AngularJS中的ng-绑定-html指令

前言

在为超文本标记语言标签绑定数据的时，如果绑定的内容是纯文本，你可以使用{{}}或者装订。但在为超文本标记语言标签绑定带超文本标记语言标签的内容的时候，angularjs为了安全考虑，不会将其渲染成html，而是将其当做文本直接在页面上展示。

先来看一个例子

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title脚本src=' http : js/angular。量滴js '/脚本脚本角度。模块(' myapp '，[]).控制器(' MyController '，函数($ scope){ $ scope。内容=' h1你好世界./h1 '；$ scope . txt=' Hello txt world })；/script/head body ng-app=' myapp ' div ng-controller='我的控制器' { content } } div ng-bind=' content '/div/div/body/html输出

ng-绑定-html指令

div ng-bind-html='content'/div这时就会出现安全的错误，如图：

但可以通过引入下面的模块，自动检测超文本标记语言的内容是否安全

脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。5 .0-beta。0/角度-消毒。量滴js '/脚本脚本角度。模块(' myapp '，['ngSanitize']).控制器(' MyController '，函数($ scope){ $ scope。内容=' h1你好世界./h1 '；$ scope . txt=' Hello txt world })；/script这时刷新预览

所以

ng-绑定-html指令是通一个安全的方式将内容绑定到超文本标记语言元素上。

当你想让AngularJS在你的应用中写入HTML，你就需要去检测一些危险代码。通过在应用中引入angular-santize.js '模块，使用禁用函数来检测代码的安全性在您的应用程序中，您可以通过运行禁用函数来运行超文本标记语言代码。

另外一种处理方式

通过自定义过滤器，将带超文本标记语言标签的内容都当成安全的进行处理。

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title脚本src=' http : js/angular。量滴js '/脚本！-脚本src=' http :http://apps。bdimg。com/libs/angular。js/1。5 .0-beta。0/角度-消毒。量滴js '/script-脚本角度。模块(' myapp '，[]).控制器(' MyController '，函数($ scope){ $ scope。内容=' h1你好世界./h1 '；$ scope.txt=' Hello txt world})。过滤器(' safeHtml '，函数($ SCE){ 0返回函数（输入){ //在这里可以对加载超文本标记语言渲染后进行特别处理返回$sce.trustAsHtml(输入);};});/script/head body ng-app=' myapp ' div ng-controller='我的控制器' { content } } div ng-bind=' content '/div！-div ng-bind-html='内容'/div-div ng-bind-html='内容|安全html '/div/div/body/html总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。