【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示
做项目的时候遇到的问题
1、问题描述
用户在表单某个值输入多个空格,例如:A B,保存至服务器
在列表查询页面中使用bg-bind的指令单向绑定,结果展示位A B,连续的空格被替换为单个空格
2、定位分析
2.1 从用户输入到最终查询展示经理太多环节,可能转换的地方有: 输入时的事件中,请求服务器前,http传输,服务器接收解析,服务器处理,服务器保存至数据库,数据库查询服务,查询服务返回,界面展示
因此逆向定位问题好些
通过Chrome中network看到服务器返回的数据带有多个空格,查看html元素,元素代码中是由多个空格,
初步判定是由于类似html直接赋值给dom元素,html默认会把连续空格展示为1个空格
2.2 分析代码走向,在angular 1.4.8中 ngBindDirective 代码如下
这里是采用textContent方法
textContent的特点在文章下方的参考中已经指出:先将ASCII实体对应的字符(<、>、&、'和")转换为实体名,然后把处理后的值赋予给innerHTML属性。
var ngBindDirective = ['$compile', function($compile) { return { restrict: 'AC', compile: function ngBindCompile(templateElement) { $compile.$$addBindingClass(templateElement); return function ngBindLink(scope, element, attr) { $compile.$$addBindingInfo(element, attr.ngBind); element = element[0]; scope.$watch(attr.ngBind, function ngBindWatchAction(value) { element.textContent = isUndefined(value) ? '' : value; }); }; } }; }];
3、解决
3.1 尝试直接替换value中的空格 element.textContent = isUndefined(value) ? '' : value.replace(/[ ]/g," ");
 会被保留在html中,这和以前常用的jquery的html()或者innerHtml不一样
3.2 替换后的value以innerHtml的方法放到DOM对象中
element.textContent = isUndefined(value) ? '' : value;
element.innerHTML = (element.textContent + '').replace(/\s\s/g," ").replace(/[\<]/,"<").replace(/[\>]/,">").replace(/\&/,"&");
OK ,搞定,这里入戏修改是否合适还不太清除。基于我们项目目前的情况1、严格使用ng-bind,2 使用$sce 3、数据在Service有编码转码处理,目前还没有发现BUG,但是在通用场景下这样改是否合适? 欢迎大家补充
参考:JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性
【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示的更多相关文章
- vue踩坑记,持续更新中......
1.运行项目报错 you may use special comments to disable some waring. use //eslint-disable-next-line.....吧啦吧 ...
- 踩坑---vue-cli搭建的项目中localhost不能访问
只需要在config文件夹里面的index.js文件里面的module.exports下面的dev中的 host:'localhost' 改为 host:'0.0.0.0' ,然后重启服务器
- 每日踩坑 2018-09-29 .Net Core 控制器中读取 Request.Body
测试代码: 结果: PostMan: 代码: private string GetRequestBodyUTF8String() { this.Request.EnableBuffering(); ; ...
- 『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...
- Spring Cloud Feign踩坑记录(二)
注意,以下的Feign遇到的坑,在高版本中有些已经修复. 某些项目由于历史包袱原因,无法进行全面升级,才需要修补这些坑. 1.启动报错:not annotated with HTTP method t ...
- SpringBoot + Shiro + shiro.ini 的踩坑记录
0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
- Spring WebSocket踩坑指南
Spring WebSocket踩坑指南 本次公司项目中需要在后台与安卓App间建立一个长连接,这里采用了Spring的WebSocket,协议为Stomp. 关于Stomp协议这里就不多介绍了,网上 ...
- 《AngularJS权威教程》中关于指令双向数据绑定的理解
在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...
- MySQL 5.7版本安装教程-踩坑总结
下载 MySQL下载地址 选择下载64位(看自己电脑是32位还是64位) 点击下载之后,它会让你登录,没有Oracle账户,跟着它的步骤注册一个就好了. 安装 打开下载好的压缩包解压到你的某一目录下, ...
随机推荐
- 微信小程序简述
最近在公司实习,经理要求做一个微信小程序,晚上闲时来写一下. 微信小程序问世没多久,但毋庸置疑的是在不久的将来,它可以替代掉很多的APP.个人认为它的优势在于占用资源少,可以做到即用即走,对于一些使用 ...
- Java Listener pattern 监听者模式
Java Listener pattern 监听者模式 2016-5-12 监听者模式(观察者模式)能降低对象之间耦合程度.为两个相互依赖调用的类进行解耦. 便于进行模块化开发工作.不同模块的开发者可 ...
- Android-重新包装Toast,自定义背景
Android-重新包装Toast,自定义背景 2016-4-27 Android L 算是包装了一个自己使用的小工具. 使用Toast的目的是弹一个提示框.先看一下Toast.makeText方法. ...
- windows环境下,anoconnda安装tensorflow
最近对深度学习研究比较多,目前最火的Python深度学习库应该是tensorflow了. 为了方便,本人在windows下用anaconda来使用python,且同时安装了,anaconda2,3,3 ...
- Python基础之内置函数和递归
一.内置函数 下面简单介绍几个: 1.abs() 求绝对值 2.all() 如果 iterable 的所有元素都为真(或者如果可迭代为空),则返回 True 3.any() 如果 iterable 的 ...
- RxSwift 系列(九) -- 那些难以理解的概念
前言 看完本系列前面几篇之后,估计大家也还是有点懵逼,本系列前八篇也都是参考RxSwift官方文档和一些概念做的解读.上几篇文章概念性的东西有点多,一时也是很难全部记住,大家脑子里面知道有这么个概念就 ...
- Selenium模拟JQuery滑动解锁
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. https://www.helloweba.com/demo/2017 ...
- (转)每天一个linux命令(8):cp 命令,复制文件和文件夹
场景:自动部署脚本中为了部署方便,将配置文件放在服务器端,每次部署都使用服务端的配置文件覆盖上传上去的配置文件. cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一. 一般情况下,she ...
- 点击<tr>表格行元素进行跳转
意外发现table中利用<a>标签控制tr的行为无效. 尝试<a>标签在table中的使用,只有在<td><a href="">&l ...
- ABP从入门到精通(3):aspnet-zero-core 使用Redis缓存
一.Redis是什么? redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset ...