Angular binding scope string with forward slash and numbers rerendering incorrectly

ionic-v1
1

Hello,

I am having an issue on the iPad only (desktop browsers fine) where if I have $scope.data = “9578867/77”, and bind this to a view like so; <h3>{{data}}</h3>, for some reason angular / ionic appears to re-render display of the value after a second or two from the correct display of “9578867/77” to something like “/779578867”, where the “9578867” right-part of the re-rendered display of that string is formatted into a link. Also notice the movement of /77 to the left of the re-rendered display.

I just want the output to display as-is that of the string value with no manipulation at all.

This behaviour seems to be happening when a slash and further digits is appended to a string with digits already prefixed.

I do not know what is causing this behaviour on the iPad only, whether it be AngularJS or Ionic. Have anyone had any similar problems? How would I overcome this issue? I am using Ionic v1.0.0-beta.13

Update
Further to add, I’ve noticed an anchor element is automatically inserted inside the <h3> tag with a input type of tel whenever I add slash digit digit, or even just pure digits for a string. Full sample html snippet after auto re-rendered H3 display is given below:

<h3><a href=“tel:9578867” x-apple-data-detectors=“true” x-apple-data-detectors-type=“telephone” x-apple-data-detectors-result=“0”>9578867</a>/77</h3>

Seems like Angular, or Ionic or, iPad’s web view is trying to be too clever? How would I stop this behaviour?

2

Have you tried disabling automatic telephone links by adding this to your index.html?

<meta name="format-detection" content="telephone=no" />

Or maybe binding it directly to the html?

<h3 ng-bind="data"></h3>

I can’t reproduce your issue on my iPhone, so I’m just throwing things out there.

4 Likes
3

Hey there,

Thanks for your reply, I actually found and applied the solution much earlier today! The solution is the first suggestion you had made (not second), and that is inserting the following code inside the <head> tag:

<meta name=“format-detection” content=“telephone=no” />

That did the trick!

The root cause appears to be stemming from iOS UIWebView auto detecting data of particular formats by default (in my case anyway), not just numbers, and converting them automatically, such as to telephone links in my case. Note, applying the above solution in the head will disable auto-detection and conversion of all telephone-numbers-like strings to telephone links from within the HTML file it is applied to. I couldn’t find a way to disable this at element level, which would be ideal…

(For the record, for the second solution you suggested, I had tried using ng-bind before creating this topic, to no avail, nor using ng-bind-html when outputting string with forward slash represented as a html entity code, yet still it converted numbers to links.)

3 Likes