Since my last screencast about how to use F7 with Angular the most asked question that I got was about ajax pages, something like this:
"In your example you have all your pages in one html file but what if I separated each page into its own file using Framework7’s ajax pages mechanism? (read F7 docs about ajax pages).
If I use it, all the bindings from Angular do not work anymore. How do I fix this, oh mighty Timo?"
(Minor quote inaccuracies might be included)
Well, the problem here is that Framework7 will get each page via ajax (when a link that points to it is clicked) and then inject it into the DOM. Angular does not know anything about this and thus will not update any bindings. Luckily, there is an easy fix for this.
The solution to ajax pages with Angular
When you inject a new HTML snippet into the DOM via Ajax pages, you simply do:
$compile(snippet)($scope);
$scope.$apply();
(See demo source code for an example how to use this)
This will recompile the HTML snippet that got added and then apply the changes and BOOOOM, that’s it.
Note: You don’t want to do this to often as it affects performance quite a bit.
Demo
I also created a quick demo for you to check this out. In order to work you must serve it via http protocol from a web server like Apache or NGINX. Just double-clicking the index.html file and serving it via file:/// will not work because you cannot do ajax calls via file:///.
Get the demo on: Github
very good job :)
I have downloaded the demo but the details page didnot work, also what is
” if ($$(‘#detail’).length > 0)” ??
hey, I cannot help you if you only say that “the page did not work”. It’s as if I go to a garage with my car and tell the engineer that “my car doesn’t work”. A little more precise description of the problem would be nice ;-)
$(‘#detail’).length > 0checks if there is an element with id “detail”. Basic jQuery code.Is it possible to do slide animation in the Material theme in F7?
@ashok1986Ashok I’m not sure, might be possible but I don’t know how and I also wouldn’t know why anyone would want this :-)
I recommend to ask on F7 forums. The pros there might know a solution: http://forum.framework7.io
Hi Timo,
I am facing issues with the Navigation. When I am navigating deep (2 or more pages) and again going back to page, the first page is refreshing and the compiled templates not displaying. For example
News page->Detail page->Back to News page (working fine)
But—
News page->Detail Pages->More Detail Page->Back to Detail Page->Back to News Page (Not displaying the template rendering)
Please help..
Hi Sanjeev, you need to show me your full (runnable) code, otherwise I cannot help you.
I enabled the option {domCache:true}. It is working fine now.
Hi,
I applied the angular template but none of the links are clickable. even if ng-click is not working. please help
@Marco You’d have to give a little bit more information than just “not working. please help”. I have no magic sphere.
Maybe you could even upload your app somewhere so I can have a look into it.
@Timo here is the files. https://onedrive.live.com/redir?resid=1A228C471A60F1F5!117&authkey=!AINLPhP05wIYkUQ&ithint=file%2czip
@Marco You have to reference cordova.js in the head of your html document, not the body – otherwise cordova.js will be loaded to late. Also, make sure to load it first, before all other scripts.
Thank you Timo for this really helpful code snippet! For others with this problem: Don’t forget to delete the Dependency Injection of the LocationProvider ($location) if you used it before! That cause also problems with page routing: A child-page jumps back immediately to the parent-page.
Hello Dear. I try to run in Mozilla Firefox the code as it is, but no success. Chrome it is OK.
So… changing the component from “$compile(e.srcElement)” to “$compile(e.target)” it works like a charm on both browsers.
Hey, Luciano. Thanks for the hint! :)