LoginSignup
8

More than 5 years have passed since last update.

$scopeを使わずpopPage後に前画面をリロードする

Last updated at Posted at 2016-04-12

「えー?マジ$scope!?」「$scopeが許されるのはv1.1までだよね!」

モダンAngularJSのお作法的に$scope$rootScopeは仕様を控えるべき、だそうです。

popPage後に元ページをリロードさせる際、$scope.$emit$scope.$broadcastは使えないということですね。

解決法1

popPageのrefreshをtrueに設定する。
replacePageと同じくこれは元のページ全体を再読込みする。

detail.js
var page = nav.getCurrentPage();

// 前の画面に戻る
function back() {
    var options = {
        animation : "slide",
        refresh   : true
    };
    nav.popPage(options);
}

一瞬でツールバーごと消えるのが玉にキズ。
ons-splitter-contentの部分だけリロードしたい場合は向かないかと。

解決法2

pushPage時にリロード用のメソッドも一緒に送る。
遷移後ページのpopPageのonTransitionEndで元ページのリロードメソッドを呼ぶ。

まずは遷移元画面のJavaScript。
読み込み処理をpushPageの引数optionにreloadという名前で登録。

master.js
// 詳細表示
function showDetail(data) {
    var options = {
        animation : "slide",
        reload : function() {
            load();
        }
    };
    nav.pushPage('detail.html', options);
}

// 読み込み
function load() {
    /* データを読み込む処理 */
}

こちらは遷移先画面のJavaScript。
onTransitionEnd(2.0RC以降はcallback)で元画面から渡されたreloadを呼んでいます。

detail.js
//var args = nav.topPage.pushedOptions; // 2.0RC以降
var args = nav.getCurrentPage().options;

// 前の画面に戻る
function back() {
    var options = {
        animation : "slide",
        // callback : function() {  // 2.0RC以降
        onTransitionEnd : function() {
            args.reload();
        }
    };
    nav.popPage(options);
}

結論

簡単なのはrefresh:trueに設定してpopPageを呼ぶ方法。
部分的にリロードをかける場合はonTransitionEnd(現在はcallback)を駆使するのが良いっぽいです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8