【踩坑】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,"&nbsp;");

　　　　&nbsp会被保留在html中，这和以前常用的jquery的html()或者innerHtml不一样

　　3.2 替换后的value以innerHtml的方法放到DOM对象中　　

　　　　element.textContent = isUndefined(value) ? '' : value;
　　　　element.innerHTML = (element.textContent + '').replace(/\s\s/g,"&nbsp;&nbsp;").replace(/[\<]/,"&lt;").replace(/[\>]/,"&gt;").replace(/\&/,"&amp;");

 

　　　　OK ，搞定，这里入戏修改是否合适还不太清除。基于我们项目目前的情况1、严格使用ng-bind，2 使用$sce 3、数据在Service有编码转码处理，目前还没有发现BUG，但是在通用场景下这样改是否合适？ 欢迎大家补充

 

 

参考：JS魔法堂：被玩坏的innerHTML、innerText、textContent和value属性