2

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

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

しかし、ウィンドウの注釈を開くと、ロードとコンパイルが同時に行われます。私のコンパイルコードは次のとおりです。

//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()同期ですか? promise を使用して、新しいページのアニメーションが開始され、完了した後$compileにのみ開始されるようにする必要がある場合$apply。

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

4

3 に答える 3

1

解決策を見つけました。それは非常に簡単です。それを行う必要があるのは、framework7 を次のように構成するだけです。

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

ページでは、次のように「キャッシュ済み」としてマークする必要があります。

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

ビュー内の「about」ページが開きます。このコードは、DOM で既に見つかった上位の開いているページを許可し、別のファイルから挿入しません。angularでの使用に最適なので、angularがロード時にすべてを必要としていることを知っているようです。これで、ページを再コンパイルせずに、framework7 のページでディレクティブ コントローラーなどを使用できるようになりました (電話では再コンパイルが広すぎます)。

これが他の誰かに役立つことを願っています。

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

于 2016-03-25T15:05:49.343 に答える