做项目的时候遇到的问题
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属性。
代码语言:javascript复制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(/ss/g," ").replace(/[<]/,"<").replace(/[>]/,">").replace(/&/,"&");
OK ,搞定,这里入戏修改是否合适还不太清除。基于我们项目目前的情况1、严格使用ng-bind,2 使用$sce 3、数据在Service有编码转码处理,目前还没有发现BUG,但是在通用场景下这样改是否合适? 欢迎大家补充
参考:JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性