3

ユーザーが検索条件を入力すると検索結果が表示される検索ページが1つあり、ユーザーが別のページに移動してこのページに戻ったときに、結果が持続する必要があります。

各サブモジュールには、独自の app.js とコントローラーがあり、ページ間でデータを永続化する方法があります。$localStorage の使い方がよくわかりません

4

1 に答える 1

4

コメントが言っているように、サービスと工場はどちらもこれが可能です。私は通常、あなたが提案したように localStorageService を使用してこれを処理します。まず、angularJS の後、app.js の前に、index.html にローカル ストレージ モジュールをロードします。

<script src="/angular/angular.js"></script>
<script src="/lib/angular-local-storage.js"></script>
<script src="/app.js"></script>

次に、メイン モジュールの宣言に LocalStorageModule を依存関係として含めます。

angular.module('test',['LocalStorageModule']);

ここで、次を使用して、関連するモジュールの宣言ファイルで locaStorageService を構成します。

localStorageServiceProvider
  .setStorageType('localStorage');

全体として、app.js ファイルは次のようになります。

angular.module('test',['LocalStorageModule']);

  config.$inject = ['localStorageServiceProvider'];
  function config (localStorageServiceProvider) {
  localStorageServiceProvider
      .setStorageType('localStorage');
  }

  angular
  .module('test')
  .config(['localStorageServiceProvider', config]);
  })();

スクリプトを本番環境に移行する前に縮小するため、特に $inject 構文で依存性注入を使用します。

ページの読み込み時に Cookie からクエリを読み込み、検索の実行時にクエリを Cookie に保存するコントローラーの例 ($scope.doSearch):

(function () {

angular.module("pstat")
       .controller("homeCtrl", homeCtrl);

  homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
   function homeCtrl ($log, dataService, localStorageService, $http) { {
     if (localStorageService.get("query")) { //Returns null for missing 'query' cookie
        //Or store the results directly if they aren't too large
        //Do something with your saved query on page load, probably get data
        //Example:
        dataService.getData(query)
        .success( function (data) {})
        .error( function (err) {})
     }
     $scope.doSearch = function (query) {
       vm.token = localStorageService.set("query", query);
       //Then actually do your search
     }
   })
}()

ルート URL が変更されない限り、localStorageService を介して任意のページのクエリまたは結果でこの Cookie にアクセスできます。何か詳細が必要な場合は、お知らせください。

ページの読み込み時にこれを自動的に実行したい場合は、コントローラーをすぐに呼び出される関数式でラップする必要があることに注意してください。幸運を！AngularJS の習得にはかなりの時間がかかりますが、利用可能な最も強力なフロント エンド ソフトウェア スイートの 1 つです。

于 2015-10-21T18:03:22.187 に答える