【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示

2018-04-16 18:04:46 浏览数 (1)

做项目的时候遇到的问题

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,"&nbsp;");

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

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

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

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

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

0 人点赞