4

This is my first question on SO so i'll try and make it as clear and as understandable as possible.

I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/

The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:

.../index.html#mainpage

(mainpage being the page for the list keeper)

Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).

If you want to see what the issue looks like:

enter image description here

Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.

Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).

Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!

Omar
  • 32,302
  • 9
  • 69
  • 112
Cliff Sun
  • 354
  • 4
  • 9
  • That's because angularjs has no idea about the classes from jQuery Mobile you are trying to apply to list item at the time they get created. – defau1t Oct 20 '13 at 18:05
  • I don't think it's a URL hashtag matter. It's about timing, JQM refreshes/re-enhance listview before angular appends new item. Check this http://jsfiddle.net/mvmcc/8/ in the head I disabled hash change, it didn't solve the problem, so I delayed listview refresh and it worked. – Omar Oct 20 '13 at 19:26
  • 1
    Check this answer, but use `.listview('refresh')` instead of `.trigger('create')` http://stackoverflow.com/a/16950459/1771795 – Omar Oct 20 '13 at 19:56
  • 1
    Thanks Omar for the help, setting a timeout (as small as 1ms) for listview.('refresh') works but I don't like the fact that I have to do that. Why does it work fine without the hashtag but then when there is a hashtag I have to add a timeout? – Cliff Sun Oct 20 '13 at 23:08
  • have you check the answer in my second comment? – Omar Oct 21 '13 at 12:13
  • Yeah, unfortunately that didn't work for me and doesn't really answer the question. As I said before, in the case without the hashtag in the url, I just called .listview('refresh') after adding a new item to the scope and that worked fine. But adding a slight delay works in this case (though occasionally you can see the raw unstyled element for a split second before it refreshes). – Cliff Sun Oct 21 '13 at 16:40
  • perhaps you will find this useful: http://www.bennadel.com/blog/2444-Exploring-Directives-scope-DOM-Rendering-And-Timing-In-AngularJS.htm – Joe Naber Apr 07 '14 at 22:21
  • would adding a has prefix in your routes help i wonder? $locationProvider.hashPrefix('!'); – Oguzhan Aug 09 '14 at 10:10

1 Answers1

0

You should be creating a directive that encapsulates the list and the logic that you have for it.

As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.

You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.