Сохраняйте данные, когда пользователь возвращается к предыдущему виду - Angularjs

Question

Я реализовал приложение, в котором я показываю список результатов, затем я разрешаю пользователю выбирать строки для сравнения и показывать дополнительные данные о них.

Я использую angular ui route, и у меня есть 2 вида и 2 контроллера по одному для каждого, поэтому я ищу лучший способ сохранить информацию в первом представлении (где у меня есть все результаты перед тем, как идти к представлению сравнения), когда пользователь возвращается к первому виду.

До сих пор, что я пытался это использовать $localstorage, но в первом взгляде у меня есть форма, где пользователь может фильтровать критерии поиска, а также у меня есть некоторые <select></select> которые являются нагрузками с помощью ajax аукнется, так .. с $localstorage Я сохраняю информацию, но не задаю детали формы для select input, потому что вызов ajax не выполнен, и я не хочу, чтобы локальное хранилище всегда сохранялось только в том случае, когда пользователь вернулся к предварительным просмотрам.

Ниже вы можете увидеть настройки для angular route ui:

.state('deposit', { 
    url: '/deposit', 
    templateUrl: './app/components/deposit/index.html', 
    views: { "" : { templateUrl: './app/components/deposit/index.html' }, 
     "search@deposit": { templateUrl: "./app/components/deposit/search.html", 
          controller: "DepositSearchController"} 
    } 
    }) 
    .state('depositcomparison', { 
    url: "/deposit/comparison", 
    params: { 
     ids: null, 
     depositSearchData: null 
    }, 
    templateUrl: './app/components/depositComparison/depositComparisonView.html', 
    controller: 'DepositComparisonController' 
    }) 

Что такое правильный способ сохранить данные только тогда, когда я вернулся с точки зрения сравнения с точки зрения результата?

есть ли способ лучше, чем localstorage?

Спасибо.

/*********** Обновление ***********/ /*********** Проблема с ajax **** *******/

Получить данные для выбора:

//... 
$http.get(window.serviceUrl + '/api/institute'). 
    success(function(data){ 
    $scope.institutes = data.content; 
    $scope.institutes.push({id: '0', name: 'All'}); 
    $localstorage.setObject('instituteData', $scope.institutes); 
    }). 
    error(function(data){ 
    console.log('Error'); 
    }); 
//.. 

Проверить localstorage:

//.. 
angular.element(document).ready(function() { 
    if ($localstorage.getObject('instituteData').length !== 0) { 
     $scope.institutes = $localstorage.getObject('instituteData'); 
     } 
    //else call the ajax 
//.. 
}); 

Html:

<label for="forinstitute">Account Type</label> 
<select id="instituteValue" class="form-control" ng-model="institute.id"> 
<option value=""> Select account</option> 
<option ng-repeat="institute in institutes | orderBy:'name'" value="{{institute .id}}">{{institute .name}}</option> 
</select> 

/********************************************** **********/

может быть решением проблемы $watch ??

Answer 1

Вы должны хранить любые данные, которые хотите отобразить в представлениях в службе углов. Затем вы вводите эту услугу в свои контроллеры. Данные сохраняются в сервисе, поскольку услуги в Angular - singletons.

Answer 2

Ознакомьтесь с инструкциями по использованию маршрутизатора. http://christopherthielen.github.io/ui-router-extras/#/sticky Попробуйте использовать липкие состояния, но будьте осторожны, поскольку контроллеры на этом представлении не будут повторно инициализированы, когда вы вернетесь к этому виду.

Пример использование,

$stateProvider 
     //home state 
     .state('home', { 
      url: '/home', 
      templateUrl: 'views/layout/home.html' 
     }) 
     //Client States 
     .state('home.clients', { 
      url: '/clients', 
      views: { 
       'clientTab@home':{ 
       templateUrl: 'views/client/clients.html' 
       } 
      }, 
      deepStateRedirect: true, 
      sticky: true 
      }); 
$urlRouterProvider.otherwise('/');