Framework7とAngularJSでページをロード

Question

私はphonegap + AngularJS + Framework7を使用して電話アプリケーションを開発しました。 私の問題はframework7のスワップページから始まります。

Framework7ユーザがリンクボタンを押したときに動的に新しいHTMLページをDOMに注入します。したがって、挿入した新しいhtmlパーツを再コンパイルするには、$ compileと$ apply（）をangleで使用する必要があります。

ただし、ウィンドウを開くと、アニメーションが途切れることがありますが、同時に読み込んでコンパイルしています。 私のコンパイルコードは、ということです。

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

「beforeAnimation」というイベントもあります。 アニメーションの前にすべてをコンパイルしてユーザーに読み込みスピナーを表示し、ページが準備できたらアニメーションを開始してそのページを表示したいと思っていたのでしょうか？ しかし、私はこのソリューションを実装する方法がわかりません$compileと$apply()は同期ですか？新しいページのアニメーションが$compileと$applyの後にのみ開始されることを約束しておかなければなりません。

あなたが他の解決策について考えるなら、私はそれを聞いてうれしいです。

Answer 1

に成功したものの

唯一のもの、私が解決策を見つけた枠組み7でそれを統合するために挑戦することができます。あなたはちょうどそのよう「キャッシュされた」としてそれをマークする必要がページに今すぐ

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

：それは非常にシンプルな、あなたがそれをしなければならないすべては、ちょうどにframework7をconfigです

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

とあなたはちょうどJavaScriptコードを使用する必要があるページを開くには：

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

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

これは、ビューの中に '約'ページが開きます。 このコードでは、すでにDOM上に見つかっている、開いているページのうち、別のファイルから挿入していないページを開くことができます。 あなたは角度を知っているように、角度で使用するのに最適です。 ページを再コンパイルしなくても、フレームワーク7のページでディレクティブコントローラなどを使用できます（再コンパイルは電話では広すぎます）。

他の人に役立つことを願っています。

EDIT： ドキュメント：http://framework7.io/docs/pages-inline.html

Answer 2

私はそれがあなたに大いに役立つかもしれませんが、あなたに正しい方向を与えるかもしれません。あなたのアプリケーションにui-router（https://github.com/angular-ui/ui-router）フレームワークを使用するように提案したいと思います。それによって、このような種類のハッキングを実行する必要はありません。一部の人々はそれを https://github.com/nolimits4web/Framework7/issues/35

Answer 3

あなたはpageinitイベントに関する見解をコンパイルしようとする必要があります。この

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

}; 

を試してみて、このプラグインを設定しながら、あなたは以下を参照することができます詳細についてはframework7アプリ

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

の初期化GitHubのレポで完全に動作するデモ https://github.com/ashvin777/framework7.angular