web-dev-qa-db-ja.com

Ionicフレームワークを使用したログイン/ログアウトでの履歴のクリアとリロードページ

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

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

angularjsangular-ui-routerionic-framework
79
frictionlesspulley

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

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

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

実際にページをリロードする場合（たとえば、すべてを再ブートストラップする場合）、次を使用できます。

$window.location.reload(true)

がんばろう！

123
JimTheDev

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

Ionicを簡単に変更する必要があるため、私の回答を参照してください。プルリクエストを作成しました。 https://stackoverflow.com/a/30224972/756177

25
ABCD.ca

正しい答え：

$window.location.reload(true);
18
EpokK

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

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

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

ビュー自体をリロードすることなく、データをリロードするための状態変更イベントを処理できます。

ここでionicViewライフサイクルについて読む

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

データをリロードするためにbeforeEnterイベントを処理します。

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

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

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

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

ionic --versionは1.7.5と言います。

6
glaucomorais

上記のソリューションはいずれも、localhostと異なるホスト名に対しては機能しませんでした！

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

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

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

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

<<<編集終了<<<

これについての詳細は i-router reference をご覧ください。

1
Majid Mallis

.state（url： '/ url'、controller：Ctl、templateUrl： 'template.html'、cache：false）cache：false ==>問題を解決しました！

0
Mohammed BOUTCHEKKOUCHT

スクロールバーを機能させるには、状態をリロードする必要がありました。 「登録」という別の州を通過するとき、彼らは働きませんでした。登録後にアプリが強制的に閉じられ、再び開かれた場合、つまり、直接「ホーム」状態になった場合、スクロールバーは機能しました。上記のソリューションはどれも機能しませんでした。

登録後、私は置き換えました：

$state.go("home");

と

window.location = "index.html";

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

0
Tom Andraszek

コントローラーは1回だけ呼び出され、この論理モデルを保存する必要があります（通常は次のようにします）。

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

このメソッドの最初に$ionicLoading.show({template:..})を呼び出して、カスタムスピナーを表示します

再読み込みプロセスが完了すると、$ionicLoading.hide()をコールバックとして呼び出すことができます

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

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

お役に立てれば！

0
Nourdine Alouane

@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 = '';
});
0
Dev

私は混乱しているウェブサイトを見たときにangularjsを使用してページを更新しようとしましたが、コードに対してコードが機能していなかったため、

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

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

0
Krishnaraj

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

$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
EduLopez