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:
(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.
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
Get the demo on: Github