Ionicを使用したモバイルアプリケーション開発は初めてです。ログインおよびログアウト時に、データを更新するためにページをリロードする必要がありますが、リロード$state.go('mainPage')
せずにユーザーをビューに戻します。その背後にあるコントローラーが呼び出されることはありません。
履歴をクリアしてIonicで状態をリロードする方法はありますか?
回答:
フレームワークへようこそ!実際、Ionicのルーティングはui-routerを利用しています。これを達成するためのいくつかの異なる方法を見つけるために、おそらくこの前のSOの質問をチェックする必要があります。
状態をリロードするだけの場合は、次を使用できます。
$state.go($state.current, {}, {reload: true});
実際にページをリロードしたい場合(のように、すべてを再ブートストラップしたい場合)、次を使用できます。
$window.location.reload(true)
幸運を!
$state.go($state.current, {}, {reload: true});
cache:true
状態定義のif (キャッシュが省略された場合のデフォルト)では機能しません。#ionic1.0.0-RC2および1.0.0でテスト済み。私の答えを見てください。
JimTheDevの答えは、状態の定義がcache:false
設定されている場合にのみ機能することがわかりました。ビューをキャッシュすると、あなたが行うことができ$ionicHistory.clearCache()
、その後と$state.go('app.fooDestinationView')
あなたはキャッシュされているが、リフレッシュ必要一対一の状態から航行している場合。
Ionicへの簡単な変更が必要で、プルリクエストを作成したので、ここで私の答えを参照してください:https://stackoverflow.com/a/30224972/756177
正解:
$window.location.reload(true);
$window
代わりに使用するためwindow
私はそれを成し遂げるのに役立つ解決策を見つけました。タグを設定cache-view="false"
するとion-view
問題が解決しました。
<ion-view cache-view="false" view-title="My Title!">
....
</ion-view>
ページをリロードするのは最善の方法ではありません。
ビュー自体をリロードせずに、リロードデータの状態変更イベントを処理できます。
ここでionicViewのライフサイクルについて読んでください:
http://blog.ionic.io/navigating-the-changes/
データの再読み込みのためにイベントbeforeEnterを処理します。
$scope.$on('$ionicView.beforeEnter', function(){
// Any thing you can think of
});
$scope.$on('$ionicView.beforeEnter', function(scopes, states) { if (states.fromCache) { ... } }
私の場合、ビューだけをクリアしてコントローラーを再起動する必要があります。私はこのスニペットで私の意図を得ることができました:
$ionicHistory.clearCache([$state.current.name]).then(function() {
$state.reload();
}
キャッシュはまだ機能しており、ビューだけがクリアされているようです。
ionic --version
1.7.5と言います。
上記の解決策はいずれも、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リファレンスを参照してください。
スクロールバーを機能させるには、状態を再読み込みする必要がありました。別の状態、つまり「登録」を通過するときに、それらは機能しませんでした。登録後にアプリを強制的に閉じて再度開いた場合、つまりアプリが直接「ホーム」状態になった場合、スクロールバーは機能しました。上記の解決策はどれも機能しませんでした。
登録後、交換しました:
$state.go("home");
と
window.location = "index.html";
アプリがリロードされ、スクロールバーが機能しました。
コントローラは一度だけ呼び出され、このロジックモデルを保持する必要があります。私が通常行うことは次のとおりです。
メソッドを作成します $scope.reload(params)
このメソッドの最初に私は $ionicLoading.show({template:..})
、カスタムスピナーを表示するため
リロード処理が終了したら、電話できます $ionicLoading.hide()
コールバックとしてます
最後に、[更新]ボタンの内側に追加します ng-click = "reload(params)"
このソリューションの唯一の欠点は、イオンナビゲーション履歴システムが失われることです。
お役に立てれば!
ビューの変更後にリロードする場合は、
$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);
.state(url: '/ url'、controller:Ctl、templateUrl: 'template.html'、cache:false)cache:false ==>問題を解決しました!
@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 = '';
});