Yana Tovpienetz Yana Tovpienetz - 4 months ago 109
AngularJS Question

Load Pages with Framework7 and AngularJS

I developed phone application using phonegap + AngularJS + Framework7.
My problem begin with the swap pages of the framework7.

Framework7 inject new HTML page to the DOM dynamically when user press on link button. hence , i have to use $compile and $apply() with angular to re-compile the new html part that injected.

but opening a window anumation is faltering while is load and compile same time.
my compile code is that:

//listiner for new page injection to DOM.
$$(document).on('pageInit', function (e) {
//on page init , compile the new DOM ijected.
$compile(angular.element(document.getElementsByClassName(e.detail.page.container.className)).contents())($scope);
$scope.$apply();
});


There is also event called "beforeAnimation" .
i thought maybe to compile everything before the animation meantime to show to the user a loading spinner and when the page is ready i want to start the animation and show him the page.
but I'm not sure how to implement this solution ,
$compile
and
$apply()
is sync ? if i have to use promise to make sure the animation of the new page will start only after
$compile
and
$apply
is done.

if you think about another solution i will be happy to hear that.

Answer

I found the solution. It very simple , all you have to do it is just config the framework7 to:

var myApp = new Framework7({
    domCache: true
}); 

Now on the pages you just have to mark it as "cached" like that:

<div class="page cached" data-page="about">
    <div class="page-content">
      <p>About page</p>
    </div>
</div>

and to open the page you just need to use javascript code:

var mainView = myApp.addView('.view-main')          

// Load about page:
mainView.router.load({pageName: 'about'});

It will be open the page 'about' inside the view. This code allow top open pages that already found on the DOM, and not inject from another file. that perfect for use with angular so like you know angular want everything on the loading. Now you can use directive controllers etc.. on your page in framework7 without re-compile the page (re-compile is too expansive on phones).

I hope this will help someone else.

EDIT: Docs: http://framework7.io/docs/pages-inline.html

Comments