web-dev-qa-db-ja.com

ページの更新時にページデータを保持する

アンギュラーは初めてです。オブジェクトのリストを取得し、それらを1ページ目に表示するサービスを使用しています。次に、クリックされたオブジェクトに基づいて、次のページでタブヘッダーを設定しています。しかし、ページを更新している間、リストのスコープが失われ、タブヘッダーが例外をスローして、ページに情報が表示されません。 2番目のページを更新する場合でも、前の画面でどのオブジェクトがクリックされたかという情報を保持する方法はありますか？

angularjspage-refreshrootscope
14
Nutan

angularローカルストレージを使用できます

Angular Local Storage

使用方法の例：

ローカルストレージを使用する例

4
V31

Angularが初めてで、ミッションクリティカルではないプロジェクトで作業している場合、リモートサービスへの追加の呼び出しは世界の終わりではありません。

2番目のページを更新する場合でも、前の画面でクリックされたオブジェクトの情報を保持する方法はありますか？

アプリでルーティングを使用していますか？

例を参照してください： http://plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview

コントローラー

app.controller("main", function($scope) {
    $scope.items = [1,2,3,4];
}); 
app.controller("detail", function($scope, $routeParams) {
    $scope.myvalue = $routeParams.id;
});

ルーティング構成

var app = angular.module("app", ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'main'
      })
      .when('/detail/:id', {
        templateUrl: 'detail',
        controller: 'detail'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

詳細ページを更新すると、状態が記憶されます。その後、サービスにデータを要求できます。

4
Mars Robertson

いくつかのanglejsアプリがありますか？理論的には、単一のHTMLファイルとパーシャル/コントローラーが必要です。使用するデータをファクトリー（シングルトン）またはangularJSキャッシュに保存できます。複数のHTMLページ間を移動する場合は、ローカルストレージまたはリロードを使用できますサーバーからのデータ。

便利なリンク：

$ cache

https://docs.angularjs.org/api/ng/service/ $ cacheFactory

ローカルストレージ：

Angularjsを使用してデータをローカルストレージに保存するにはどうすればよいですか？

2
Braulio

このようなシナリオを処理するためのベストプラクティスは、angular service + localstorageの組み合わせを使用することです

  • サービスは、2つのページ/コントローラー間でデータを転送するのに役立ちます。
  • そのデータをlocalstorageに保存すると、ページの更新時にそのデータを取得するのに役立ちます

また、データがURLの単なるIDである場合は、@ Michal Stefanowによる回答も問題ありません。

リンクの支援

1
Muslim Munir