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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了踩坑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(/[ ]/g,"&nbsp;");

 

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

 

 

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

 

以上是关于踩坑angularJS 1.X版本中 ng-bind 指令多空格展示的主要内容,如果未能解决你的问题,请参考以下文章

AngularJs学习笔记2-控制器数据绑定作用域

AngularJs学习笔记2-控制器数据绑定作用域

angularjs有几种启动方式

AngularJS VS Angular(转)

AngularJs项目

webpack 1.x升级过程中的踩坑总结大全