Collection repeat and hrefs

[mhartington]

If you are evaluating an express with ng-href with collection repeat, it causes some issues.

 ng-href="{{(0 < $index) ? '#/detail/' + pet.id : ''}}"

http://codepen.io/mhartington/pen/dfLkb

This first item will not have a link, but if you scroll down item 25, click it, go back, then scroll up to first item and click it, you will get a link.

But if you use href instead, everything works fine.

 href="{{(0 < $index) ? '#/detail/' + pet.id : ''}}"

http://codepen.io/mhartington/pen/GDBdr

[perrygovier]

Clarification, the link working on the first item is the bug. After scrolling and going back to the top, I often find it links to the 16th - 20th item (depending on velocity).

[hiroyachiba]

It seems this bug happens on ionic beta.7 and later.
The bug doesn't happen on beta.6 and before.
I think ion-item's attributes needs to be cleared before it's reused.

[ajoslin]

I see.. it's because if ng-href evalutes to a falsy value, the href will stay the same as it was before.

We can add special cases for ng-src and ng-href.

[ajoslin]

angular/angular.js#6986 is a pull request to fix this. Until that's merged, we'll create a patch on our end.

[hiroyachiba]

Thank you for looking into this issue, but I guess the problem still happens in slightly modified case.

The change fixes if the list is using
<div class="list">
<a class="item">
as in http://codepen.io/hryc/pen/LoDEe.

But the problem still happens if the list is using
<ion-list>
<ion-item>
as in http://codepen.io/hryc/pen/kLlfg.
ion-item creates a tag as its child and the a tag contains previous href value.

[mhartington]

Going to reopen this one.

Using ion-item instead of <a class="item"> still causes the issue.

http://codepen.io/mhartington/pen/baLyx

[hiroyachiba]

I guess this change will fix this issue.

ionic-angular.js, around line 657
CollectionRepeatDataSource.prototype.detachItem()

    this.backupItemsArray.push(item);
    item.element.css(ionic.CSS.TRANSFORM, 'translate3d(-2000px,-2000px,0)');
    // BEGIN
    var $a = item.element.find('a');
    if ($a) {
      $a.removeAttr('href');
      $a.removeAttr('ng-href');
    }
    // END

[ajoslin]

Fixed.

[mica16]

Using ionic 1.0rc4, when I type a french phone number in an item of collection-repeat: 0633445566, iOS transforms it into a Phone link and the bug happens.
It's very annoying since my zone is a Chat and as long as scroll down, the link moves ..like if someone else gave this number.

[mhartington]

@mica16 can you provide a codepen?

[DaDanny]

@mica16

I was having a similar issue and my solution was to disable phone number linking in Mobile Safari using this meta tag:

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

A relevant Stack Overflow post which provided the solution:
http://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari