search

opitzconsulting / jquery-mobile-angular-adapter

jquery mobile angular adapter
MIT License
517 stars 114 forks source link

problem with ng-href #197

Open marcorinck opened 11 years ago

marcorinck commented 11 years ago

I have a strange problem with ng-href in my project after updating to latest version of angular adapter 1.3.1

I have created a fiddle to demonstrate how the structure of my page is and what the user has done before the error happens. But I can't replicate it in the fiddle, maybe it has to do with some side effects of other parts of my page, f.i. the second page is in a seperate html file, which I can't emulate in jsFiddle (I don't use any user-defined routes in this project, I only call $location.url("some.html") Anyway, here is the fiddle: http://jsfiddle.net/marcorinck/jsBZh/3/

Basically, I have some links which are generated with ng-repeat. The links are part of data which are loaded from the backend via $http. The page transition after clicking on the page link only happens after data was successfully loaded via $http.

If I use ng-href for the links so that angularJS can generate the links correctly, one of two things happen after navigating to this page:

  1. I get this message in the console: Uncaught TypeError: Cannot call method 'replace' of undefined jquery.mobile.js:4351 (anonymous function) jquery.mobile.js:4351 jQuery.extend.each jquery.js:648 jQuery.fn.jQuery.each jquery.js:270 $.ajax.success jquery.mobile.js:4343 fire jquery.js:1037 self.fireWith jquery.js:1148 done jquery.js:8074 callback jquery.js:8598
  2. I get an OLD view of this page if the first rendering of the page was successful (happens sometimes, don't know why). If I click some active element on this page (f.i. tab in jqm footer) the view is updated correctly with current data.

If I use only href attribute for the links, its working correctly, but links are corrupt (which is normal when using angular expressions in href).

Very strange.

marcorinck commented 11 years ago

I could fix this with adding "href='#'" additionally to the ng-href attribute on the anchor.

So this: 

<a ng-href="{{dokument.link}}" ng-class="{'irrelevant': !dokument.relevant}" target="_blank">{{dokument.name}}</a>

got to this:

<a href="#" ng-href="{{dokument.link}}" ng-class="{'irrelevant': !dokument.relevant}" target="_blank">{{dokument.name}}</a>
tbosch commented 11 years ago

Hi, ok, great that there is a workaround! Will debug into this when there is a little more time...

Tobias

mayankdixit commented 9 years ago

I was having a delayed glitch in colour of link while using ng-href. when I added href="#" it stopped. That was weird. :angry: