【踩坑】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属性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程直播室

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

2625
来自专栏Aloys的开发之路

Linux乱码问题解决方案

linux系统中文件名内容为urf8编码, windows系统中文件名默认为gbk编码, 多数文档使用gbk编码,系统采用utf8编码 无中文输入法导致的乱码 ...

4778
来自专栏用户2442861的专栏

webStorm 3.0配置使用主题背景色等

http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html

2431
来自专栏Spark学习技巧

Kafka源码系列之源码解析SimpleConsumer的消费过程

Kafka源码系列是以kafka 0.8.2.2源码为例讲解。浪尖纯属个人爱好,才写想写这个系列。希望对kafka的使用者们带来帮助。 一,消费者消费的过程讲解...

4757
来自专栏程序员的知识天地

新鲜出炉的8月前端面试题

题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。

1032
来自专栏大学生计算机视觉学习DeepLearning

VS下如何建立一个新的MFC程序 网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

3803
来自专栏Java帮帮-微信公众号-技术文章全总结

springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码)

springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码) 上一篇介绍了spring boot整合mybatis实现了后端的CRUD...

4638
来自专栏安恒网络空间安全讲武堂

writeup | 应该不是 XSS

0x01 初步分析阶段 首先拿到题目,看到留言板,第一反应就是XSS。 但是看过题目提示后,有些不确定。 所以开始分析整道题目。 首先,观察network页面,...

4136
来自专栏云加头条

智能云上手指南:如何使用万象优图服务的 Python SDK

本文将为广大云开发者介绍如何使用万象优图服务的 Python SDK。

5343
来自专栏互联网杂技

React -- 组件间通信

分为三种类型的通信关系: 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信 父组件向子组件通信 父组件通过子组件的prop...

4437

扫码关注云+社区

领取腾讯云代金券