Collection-repeat and empty ng-href


#1

http://codepen.io/hryc/pen/LoDEe (Modified mhartington’s test program)

How to reproduce:
click ‘Name 0’. Nothing happen. (expected)
Scroll down and scroll up to the top again.
Click ‘Name 0’ again. This time, it transitions to detail page of other page. (unexpected)

‘Name 0’'s ng-href is set to ‘’.
ng-href="{{(0 < $index) ? ‘index.html#/detail/’ + pet.id : ‘’}}"
When ion-item is reused, it’s not clearing ‘href’ attribute.

Before:

After:


#2

So I was able to resolve this…with some help from SO.

I guess it has to do with collection repeat but I’m not sure why. If you use href instead of ng-href, all is well. Also, in yours, there’s no need to include index.html at the beginning.

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

I’ll open and issue for the ng-href


#3

Thank you always for your response.
This is tricky issue and I think that’s not quite workaround for my case.
(It works ok as workaround for the codepen case.)

Using href=“” creates <a href> (‘href’ attribute without value), which causes reload of the top page.
What I need is <a> (with no ‘href’ attribute). This doesn’t load any page.

My guess is this:
ng-href generates ‘href’ attribute. If ng-href is ‘’ (empty string), it doesn’t generate ‘href’ attribute.

ng-repeat creates 10 ion-items and reuses them when the screen is scrolled. (ion-item is created only for visible part)
When ion-item is reused during scroll, if ng-href is ‘’ (empty string), existing ‘href’ attribute needs to be deleted, but it’s not deleted now. Instead, ‘href’ of previos ion-item (#/detail/8) remains (bug).


#4

Alright, so I open an issue for this. Seems that in collection repeat somewhere it’s using a== instead of a===


#5

7/9’s check-in fixed the original codepen, http://codepen.io/hryc/pen/LoDEe, and https://github.com/driftyco/ionic/issues/1674 was closed.
But the problem still happens with slightly modified codepen, http://codepen.io/hryc/pen/kLlfg.
Could you reopen the bug?


#6

Question, whats different about the two codepens?


#7

I added comment to https://github.com/driftyco/ionic/issues/1674.
http://codepen.io/hryc/pen/LoDEe uses
<div class=“list”>
<a class=“item”>

http://codepen.io/hryc/pen/kLlfg uses
<ion-list>
<ion-item>


#8

Ah alright, good catch!

Also, you codepens are a little off. You have extra html and head tags, plus your links a little wrong

Instead of this

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

Do this.

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

No need for the index.html part. It doesn’t solve the issue, but it makes the links work properly now


#9

Thank you for pointing them out.
I just updated http://codepen.io/hryc/pen/kLlfg.


#10

The bug, https://github.com/driftyco/ionic/issues/1674 is still ‘closed’.
Could you re-open it?