Laden von Seiten mit Framework7 und AngularJS

Question

Ich entwickelte Telefonanwendung mit Phonegap + AngularJS + Framework7. Mein Problem beginnt mit den Auslagerungsseiten des framework7.

Framework7 injizieren neue HTML-Seite dynamisch zum DOM, wenn Benutzer auf Link-Taste drücken. Daher muss ich $ compile und $ apply() mit angular verwenden, um den neuen HTML-Teil, der injiziert wurde, neu zu kompilieren.

aber das Öffnen einer Fensteranimation stottert, während sie gleichzeitig geladen und kompiliert wird. mein Kompilierung Code ist, dass:

//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(); 
}); 

Es gibt auch Event "beforeAnimation" genannt wird. ich dachte, vielleicht alles vor der animation zwischenzeitlich zu kompilieren, um dem benutzer ein loading spinner zu zeigen und wenn die seite fertig ist will ich die animation starten und ihm die seite zeigen. aber ich bin mir nicht sicher, wie diese Lösung zu implementieren, $compile und $apply() ist Sync? wenn ich versprechen muss, stelle sicher, dass die animation der neuen seite erst nach $compile und $apply gestartet wird.

Wenn Sie an eine andere Lösung denken, werde ich mich freuen, das zu hören.

Answer 1

ich die Lösung gefunden. Es ist sehr einfach, alles, was Sie tun müssen, um es nur den framework7 wird config:

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

nun auf den Seiten, die Sie haben es einfach zu markieren als „Cache“ wie folgt aus:

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

und Um die Seite zu öffnen, müssen Sie nur Javascript-Code verwenden:

Es wird die Seite 'über' in der Ansicht geöffnet werden. Dieser Code erlaubt es, offene Seiten zu öffnen, die bereits im DOM gefunden wurden, und nicht aus einer anderen Datei zu injizieren. das perfekt für den Einsatz mit eckigen so wie Sie wissen eckig wollen alles auf dem Laden. Jetzt können Sie Anweisungssteuerungen usw. auf Ihrer Seite in framework7 verwenden, ohne die Seite neu zu kompilieren (die Neukompilierung ist zu umfangreich auf Telefonen).

Ich hoffe, dass dies jemand anderem helfen wird.

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

Answer 2

Ich bin nicht sicher, dass es Ihnen sehr helfen kann, aber vielleicht kann es Ihnen die richtige Richtung geben. Ich würde vorschlagen, dass Sie UI-Router() Framework für Ihre Anwendung verwenden. Damit müssen Sie solche Hacks nicht durchführen.

Das einzige, was, könnte es schwierig sein, es mit Framework zu integrieren 7. Auch wenn manche Leute mit ihm gelangen https://github.com/nolimits4web/Framework7/issues/35

Answer 3

Sie sollten versuchen, die Ansichten auf Pageinit Ereignis zu kompilieren.Versuchen Sie, diese

Framework7.prototype.plugins.angular = function(app, params) { 
    function compile(newPage) { 
     try { 
      var $page = $(newPage); 
      var injector = angular.element("[ng-app]").injector(); 
      var $compile = injector.get("$compile"); 
      var $timeout = injector.get("$timeout"); 
      var $scope = injector.get("$rootScope"); 
      $scope = $scope.$$childHead; 
      $timeout(function() { 
       $compile($page)($scope); 
      }) 
     } catch (e) { 
      //console.error("Some Error Occured While Compiling The Template", e); 
     } 
    } 

    return { 
     hooks: { 
      pageInit: function(pageData) { 
       compile(pageData.container); 
      } 
     } 
    } 

}; 

und setzen dieses Plugin während der Initialisierung von framework7 App

new Framework7({ 
    .... 
    angular : true 
    .... 
}) 

Für weitere Details, die Sie unten finden können GitHub Repo mit voll funktionsfähige Demos https://github.com/ashvin777/framework7.angular