"Stepping Pit" AngularJS 1.X version ng-bind instruction multi-space display

Problems when doing a project

1, problem description

A user enters multiple spaces in a form value, for example: A B, save to server

In the list query page using the BG-BIND directive one-way binding, the result of the display bit a B, a continuous space is replaced by a single space

2. Positioning analysis

2.1 From user input to final query show manager too many links, there may be conversions: input events, before the request server, HTTP transport, server receive resolution, server processing, server save to the database, database query service, query service return, interface display

So the problem of reverse positioning is better.

In Chrome, you see the data returned by the server with multiple spaces, view HTML elements, and the element code is made up of multiple spaces,

The initial decision is that HTML is directly assigned to the DOM element, and HTML will show contiguous spaces as 1 spaces by default.

2.2 Analyzing the code trend, ngbinddirective code in angular 1.4.8 is as follows

Here is the Textcontent method

The characteristics of textcontent are indicated in the reference below: first convert the ASCII entity corresponding character (<, >, &, ' and ') to the entity name, then assign the processed value to the innerHTML property.

varngbinddirective = [' $compile ',function($compile) {return{restrict:' AC ', compile:functionNgbindcompile (templateelement) {$compile. $ $addBindingClass (templateelement); return functionNgbindlink (scope, element, attr) {$compile. $ $addBindingInfo (element, attr.ngbind); Element= Element[0]; Scope. $watch (Attr.ngbind,functionNgbindwatchaction (value) {element.  textcontent  = isundefined (value)? ‘‘: value;      });    }; }  };}];

3. Solve

3.1 Try to replace the space element directly in value. textcontent = isundefined (value)? ": Value.replace (/[]/g," &nbsp; ");

will be kept in HTML, which is not the same as the HTML () or innerHTML of the previously used jquery

3.2 The replaced value is placed in the DOM object in a innerHTML way

Element.textcontent = isundefined (value)? ": value;
element.innerhtml = (element.textcontent + "). Replace (/[]/g," &nbsp; ");

OK, it's done, it's not too clear whether the change is appropriate in the play. Based on the current situation of our project 1, the strict use of ng-bind,2 $sce 3, the data in the service has code transcoding processing, there is no bug found, but in the general scenario such a change is appropriate? You are welcome to add

Reference:JS Magic Hall: Played innerHTML, InnerText, Textcontent, and Value properties

"Stepping Pit" AngularJS 1.X version ng-bind instruction multi-space display