IonicFrameworkを使用したログイン/ログアウト時の履歴のクリアとページの再読み込み


80

Ionicを使用したモバイルアプリケーション開発は初めてです。ログインおよびログアウト時に、データを更新するためにページをリロードする必要がありますが、リロード$state.go('mainPage')せずにユーザーをビューに戻します。その背後にあるコントローラーが呼び出されることはありません。

履歴をクリアしてIonicで状態をリロードする方法はありますか?

回答:


124

フレームワークへようこそ!実際、Ionicのルーティングはui-routerを利用していますこれを達成するためのいくつかの異なる方法を見つけるために、おそらくこの前のSOの質問をチェックする必要があります。

状態をリロードするだけの場合は、次を使用できます。

$state.go($state.current, {}, {reload: true});

実際にページをリロードしたい場合(のように、すべてを再ブートストラップしたい場合)、次を使用できます。

$window.location.reload(true)

幸運を!


リモートサーバーから取得したすべてのcss / jsファイルをindex.htmlにバンドルしたいと思います。ただし、変更があった場合にのみこれらをリロードしたいと思います。これをどのように構成すればよいですか?
mylord 2014

@mylordを理解しているかどうかわかりません。ライブリロードについて話しているのですか?ここで説明するHtml5オフラインキャッシュ/マニフェストに興味がある かもしれません:tmkmobile.wordpress.com/2012/03/04/html5-offline-solution質問の本来の意図以外のことをしようとしているのではないかと思います。
JimTheDev 2014

13
$ state.go($ state.current、{}、{reload:true}); この解決策は私にはうまくいきません。
iamStalker 2015年

@IamStalker例として、さらに詳しい情報や、おそらくcodepen / fiddle / plunkを提供できますか?
JimTheDev 2015年

9
$state.go($state.current, {}, {reload: true});cache:true状態定義のif (キャッシュが省略された場合のデフォルト)では機能しません。#ionic1.0.0-RC2および1.0.0でテスト済み。私の答えを見てください。
ABCD.ca 2015年

25

JimTheDevの答えは、状態の定義がcache:false設定されている場合にのみ機能することがわかりました。ビューをキャッシュすると、あなたが行うことができ$ionicHistory.clearCache()、その後と$state.go('app.fooDestinationView')あなたはキャッシュされているが、リフレッシュ必要一対一の状態から航行している場合。

Ionicへの簡単な変更が必要で、プルリクエストを作成したので、ここで私の答えを参照してくださいhttps//stackoverflow.com/a/30224972/756177


1
良いもの。私は実際にこれを私のイオンアプリで使用していないので、キャッシュ機能のフォローアップに感謝します。PRは1.0.1に移行するようです。それがリリースされたら、私はあなたを信用し、人々に見てもらうように促す私の元の投稿にメモを書きます。
JimTheDev 2015年

18

正解:

$window.location.reload(true);

1
この回答は低品質としてフラグが立てられています。なぜそれが正解なのか説明していただけますか?
ホルヘ・レイタオ2014

1
$window代わりに使用するためwindow
EpokK 2014

.location.reload構文を使用する場合は、$ windowを使用するのが理にかなっているという点で正しいです。将来の読者のために一貫性を保つために、上記の回答を変更しました。$ state.go構文は、特定の場合にも役立つ場合があります。
JimTheDev 2014

この答えだけが私を助けてくれました。チェックされた答えではありません
Michal 2015

以前はそのアプローチが好きでしたが、一部のデバイス(Android 4.4、Chrome)でリロードの無限ループが発生するという報告がありました。
Oleg Cheremisin 2016

18

私はそれを成し遂げるのに役立つ解決策を見つけました。タグを設定cache-view="false"するとion-view問題が解決しました。

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>

キャッシュビューを無効にすると、パフォーマンスが大幅に低下します。このオプションは避ける必要があります。代わりに、ionicViewイベントを処理できます。参照: stackoverflow.com/questions/25192172/...
ezain

@ezain、パフォーマンスにどのような影響があるか教えていただけますか?
Rajeshwar 2015年

@Rajeshwar、キャッシュシステムが有効になっている場合、Ionicはビューによって生成されたすべてのDOMを非表示に維持し、ビューの変更が発生したときにDOMを再計算する必要はありません。重いDOMがあり、すべての遷移変更でそれを生成する必要がある場合は、遷移アニメーションの遅れを理解できます。キャッシュを無効にする唯一の理由がコントローラーのリロードである場合は、ionicViewイベントを使用してください。
ezain 2015年

@ezain、キャッシュを無効にするこの機能を実装する方法はたくさんあります。私はそれらのほとんどすべてを試しましたが、何もうまくいきませんでした。そして、これは私に必要なものを与えてくれました。そして、ページが少し大きいにもかかわらず、そのページをロードしている間、私はかなりの遅れを見ません。だから私は他の方法よりもこの方法を好んだ。
Rajeshwar 2015年

11

ページをリロードするのは最善の方法ではありません。

ビュー自体をリロードせずに、リロードデータの状態変更イベントを処理できます。

ここでionicViewのライフサイクルについて読んでください:

http://blog.ionic.io/navigating-the-changes/

データの再読み込みのためにイベントbeforeEnterを処理します。

$scope.$on('$ionicView.beforeEnter', function(){
  // Any thing you can think of
});

これが最善のアプローチのようです。
マルカウ2016年

:特にあなたは状態がキャッシュからであるかどうかをチェックし、もしそうなら、それを更新するには、あなたのいくつかのAPIを呼び出すことができます$scope.$on('$ionicView.beforeEnter', function(scopes, states) { if (states.fromCache) { ... } }
jakub.g

@ jakub.gビューをキャッシュしたくない場合は、この特定のビューのキャッシュを無効にすることができますが、より簡単です。
ezain 2016

6

私の場合、ビューだけをクリアしてコントローラーを再起動する必要があります。私はこのスニペットで私の意図を得ることができました:

$ionicHistory.clearCache([$state.current.name]).then(function() {
  $state.reload();
}

キャッシュはまだ機能しており、ビューだけがクリアされているようです。

ionic --version 1.7.5と言います。


補遺:状態にパラメーターがある場合、ビュー/状態の識別でそれらを定義する必要があります。このペーストビンをチェックしてください:pastebin.com/2CaGYpnzは
glaucomorais

コード内のエラー正しいバージョン$ ionicHistory.clearCache([$ state.current.name])。then(function(){$ state.reload();});
キリルA

かっこがない
user623396 2017年

1

上記の解決策はいずれも、localhost!とは異なるホスト名では機能しませんでした。

呼び出しが呼び出される前に、Angular変更リスナーを呼び出さないようにするためnotify: false$state.go、渡すオプションのリストに追加する$window.location.reload必要がありました。最終的なコードは次のようになります。

$state.go('home', {}, {reload: true, notify: false});

>>>編集-ブラウザによっては$ timeoutが必要になる場合があります>>>

$timeout(function () { $window.location.reload(true); }, 100);

<<<編集の終わり<<<

これについての詳細は、ui-routerリファレンスを参照してください


0

混乱したウェブサイトを見たときにangularjsを使用してページを更新しようとしましたが、コードに対してコードが機能していなかったため、を使用してページをリロードするためのソリューションを取得しました

$state.go('path',null,{reload:true});

これが機能する関数でこれを使用します。


0

スクロールバーを機能させるには、状態を再読み込みする必要がありました。別の状態、つまり「登録」を通過するときに、それらは機能しませんでした。登録後にアプリを強制的に閉じて再度開いた場合、つまりアプリが直接「ホーム」状態になった場合、スクロールバーは機能しました。上記の解決策はどれも機能しませんでした。

登録後、交換しました:

$state.go("home");

window.location = "index.html"; 

アプリがリロードされ、スクロールバーが機能しました。


0

コントローラは一度だけ呼び出され、このロジックモデルを保持する必要があります。私が通常行うことは次のとおりです。

メソッドを作成します $scope.reload(params)

このメソッドの最初に私は $ionicLoading.show({template:..})、カスタムスピナーを表示するため

リロード処理が終了したら、電話できます $ionicLoading.hide()コールバックとしてます

最後に、[更新]ボタンの内側に追加します ng-click = "reload(params)"

このソリューションの唯一の欠点は、イオンナビゲーション履歴システムが失われることです。

お役に立てれば!


0

ビューの変更後にリロードする場合は、

$state.reload('state',{reload:true});

そのビューを新しい「ルート」にしたい場合は、次のビューがルートになることをionicに伝えることができます。

 $ionicHistory.nextViewOptions({ historyRoot: true });
 $state.go('app.xxx');
 return;

ビューが変更されるたびにコントローラーをリロードする場合

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.maxCache(0);


0

@ezainが指摘しているように、必要な場合にのみコントローラーをリロードします。コントローラをリロードするのではなく、状態を変更するときにデータを更新するもう1つのクリーンな方法は、ブロードキャストイベントを使用し、ビューのデータを更新する必要があるコントローラでそのようなイベントをリッスンすることです。

例:ログイン/ログアウト関数では、次のようなことができます。

$scope.login = function(){
    //After login logic then send a broadcast
    $rootScope.$broadcast("user-logged-in");
    $state.go("mainPage");
};
$scope.logout = function(){
   //After logout logic then send a broadcast
   $rootScope.$broadcast("user-logged-out");
   $state.go("mainPage");
};

これで、mainPageコントローラーで、$ on関数を使用してビューの変更をトリガーし、次のようにmainPageコントローラー内でブロードキャストをリッスンします。

$scope.$on("user-logged-in", function(){
     //update mainPage view data here eg. $scope.username = 'John';
});

$scope.$on("user-logged-out", function(){
    //update mainPage view data here eg. $scope.username = '';
});

-1

私は多くの方法を試しましたが、この方法は絶対に正しいことがわかりました。

$window.location.reload();

これが他の人が私のようなバージョンで何日も立ち往生するのを助けることを願っています:angular 1.5.5、ionic 1.2.4、angular-ui-router 1.0.0

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.