angularjs修改html标签,angularjs sanitize+ng-bind-html内置指令做html标签转义

之前对angularjs学习得还是不够深入，以至于自己忽略了angular-sanitize这个模块。还自己写了大量的正则表达式。但是后面发现，无论写再多的正则，也不能覆盖一些文本自带的html标签。无心插柳柳成荫。今天我莫名地去看了一下sanitize这个库的api。发现自己真他妈的傻。对于html标签的转义，原来直接采用sanitize才是最简单快捷的方法。顿感自己对angular框架的熟悉程度不够。

sanitize库是针对ng-bind-html这个内置指令去架设的，(如果直接使用，那么会报错unsafe...)普通的使用其实十分简单

以下是用例：

假设有那么一个single-page application，名叫App,数据早已WYSIWYG形式存在后台，假设存在一个key:content：

//那么只要在使用ng-bind-html之前引入：

var app =angular.module('app',['ngSanitize']);

app.controller('ctrl',['$scope','$http',()=>{

//发送post请求获取数据库的内容

$http.post('api/getWords').then((res)=>{

$scope.words =res.data[0].content

})

}])

Tips:

我发现写入数据的时候“实体字符”不能存入数据库的。因此多少都要写几个正则表达式去处理一下这个问题。

效果图

后台的原始数据：

凌乱的WYSIWYG

注：不过这个方法有一个贼蛋疼的小毛病就是展示不了html源码。因为一碰到html源码会自动转义。不过已经好太多了。这个问题要解决也不难，只要将一段html源码封装成一段字符串就行了。这里就不展示了，大家自己动动脑筋。

学习是个不断尝试的过程，走了弯路都能学到其他的。不要紧。

angularjs修改html标签,angularjs sanitize+ng-bind-html内置指令做html标签转义相关推荐

AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简 ...
AngularJS内置指令 ng-xxx
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简 ...
a标签不可点击_如何在Notion中做多级标签？-Notion102
Notion102的意思是:比101(入门级)高出一点点,但操作上仍属于新手级别. 模板链接见最下方. Notion 最新重要更新 @ 20.11.11 Timeline (数据库中增加了时间线视图. ...
c 中html上传文件大小,IOS微信内置浏览器对html标签input type=file上传的文件大小size错误？...
完整代码: function _s(){ var f = document.getElementById("f").files; //上次修改时间 alert(f[0].lastM ...
AngularJS 内置指令
1. ng-disabled <input>(text, checkbox, radio, number, url, email, submit); <textarea>; & ...
SI24R2F大功率2.4G单发内置MCU电动车安全管理标签应用芯片
电动车安全系统应用需求背景由于我国电瓶二轮车.三轮车并没有报废机制,造成了很多电瓶车超年限行驶,充电安全不可靠,电瓶反复充电次数过多,或者电瓶老化,极有可能导致充电时快速起火或者爆炸,造成不必要 ...
php 内置日历 input,input标签的日历功能实现
1. 利用HTML5 input标签属性type="date" 以上代码在PC端的样式为 Paste_Image.png 在iPhone6s手机端的样式为 Paste_Image. ...
谷歌修改useragent，chrome模拟微信、QQ内置浏览器
1.首先咋模拟时,需要用到UA,微信和 QQ 内置浏览器 UA 安卓 QQ 内置浏览器 UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX2 ...
AngularJS（1）——AngularJS指令机制
About 关于angularjs的指令学习,小编看了imooc的视频然后翻墙到外面看文章(边看边Google翻译,好好学英语吧骚年们),然后回来写一个总结,写我看到的,写我听到的. ...

angularjs修改html标签,angularjs sanitize+ng-bind-html内置指令做html标签转义

angularjs修改html标签,angularjs sanitize+ng-bind-html内置指令做html标签转义相关推荐

最新文章

热门文章