web-dev-qa-db-ja.com

ionicビューをリロードする方法は？

サイドメニューベースのアプリを作成しました。ログインすると、いくつかのタスクが表示されます。タスクをクリックすると、タスクの詳細ページにリダイレクトされ、そのページでタスクを更新できます。

タスクを更新した後、前のタスクリストページに戻る必要があります。戻るために$ionicHistory.goBack();を使用しています。

私の問題は、戻ってきた後、タスクリストを更新する必要があります。つまり、更新されたタスクがタスクリストに表示されないようにする必要があります。タスクリストを更新/再ロードするにはどうすればよいですか？

angularjscordovaionic-frameworkionic
8
Test user

タスクをtasks配列にバインドすると、task listページで使用され、自動的に更新されます。

しかし、問題は、表示されない、新しく追加されたタスク（まだ私の以前の提案は機能するはずです）が表示されない場合、パフォーマンス上の理由ionicビューがキャッシュされるため、前のビューに戻ったときにそれはありませんt通常のロードサイクルを実行しますが、2つのオプションがあります。

1-<ion-view cache-view="false" view-title="My Title!">でion-viewを使用してcachingを無効にしますが、これはあまりエレガントなソリューションではありません。 もっと読む

2-ionRefresherを使用します（私の好みです）。 詳細はこちら

9
sameera207

https://github.com/angular-ui/ui-router/issues/582

@ hpawe01によれば、「現在のionicframework（ionic：v1.0.0-beta.14、angularjs：v1.3.6、angular-ui-router：v0.2.13）を使用している場合、not-reloading-controllerの問題により、 ionicの新しいキャッシングシステムが原因であることに注意してください。これらのビューをキャッシュしているため、スコープは破棄されていません。代わりに、スコープは監視サイクルから切断されています。スコープは破棄および再作成されていないため、コントローラーは後続のビューで再度ロードします。キャッシュを無効にする方法はいくつかあります。単一の状態でのみ無効にするには、状態の定義にcache：falseを追加するだけです。これにより、問題が修正されました（何時間もの読み取り、試行、不満の後） 。ionicframeworkを使用せず、この問題にまだ直面している他のすべての場合：頑張ってください！」

お役に立てれば。

2
snehil

$ionicView.enterで$scopeなどのionicイベントなどをリッスンし、@ sameera207の提案に従ってリストをバインドしていない場合は、リストを更新するコードをトリガーすることもできます。

例えば：

// List.controller.js

angular.module('app')
    .controller('ListController', ['$scope', function($scope) {

    // See http://ionicframework.com/docs/api/directive/ionView/ for full events list
    $scope.$on('$ionicView.enter', function() {
        _someCodeThatFetchesTasks()
            .then(function(tasks) {
                $scope.tasks = tasks;
            });
    });

});

これが最も適切な方法ではない（まったく適切な場合）ことに注意してください。これを行うと、設計上の欠陥が確実に発生します。代わりに、たとえばfactoryまたはserviceを介して同じデータ配列を共有する必要があります。

1
cfz42

データ駆動型アプリを構築している場合は、app.configで$ionicConfigProvider.views.maxCache(0);を使用して、各レビューが更新されて詳細を確認できるようにしてください http://ionicframework.com/docs/api/provider / $ ionicConfigProvider /

0
Akshay Kumbhar

タスクには ion-nav-view を使用することもできます。

それは十分に文書化されています。そして、今使用している場合Ionic 2ベータ版は、onPageWillLeave()やonPageWillEnter()などのビューライフサイクルフックを使用できます。同じ問題に直面しましたそして、refresh（）関数を定義しましたが、ユーザーはボタンをクリックして実際にビューを更新する必要がありましたが、次のことがわかりました。

https://webcake.co/page-lifecycle-hooks-in-ionic-2/

PageとNavControllerモジュールをインポートし、コンストラクタで定義するだけです。たとえば、onPageWillEnter（）を使用できます。これは、ビューに再び移動したときに常に呼び出されます。

onPageWillEnter() {
    // Do whatever you want here the following code is just to show you an example. I needed it to refresh the sqlite database
    this.storage.query("SELECT * FROM archivedInserates").then((data) = > {
            this.archivedInserates =[];
    if (data.res.rows.length > 0) {
        for (var i = 0; i < data.res.rows.length; i++) {
            this.archivedInserates.Push({userName:data.res.rows.item(i).userName, email:
            data.res.rows.item(i).email});
        }
    }
    },(error) =>{
        console.log("ERROR -> " + JSON.stringify(error.err));
    });
}

ionic beta 8を使用すると、ライフサイクルイベントの名前が変更されました。ライフサイクルイベントの完全なリストについては、 official ionic blog を確認してください。

0
A. Ilazi