Question

我已经实现了一个应用程序，我在其中显示结果列表，然后我允许用户选择要比较的行并显示一些关于它们的额外数据。

我正在使用angular ui route，我有2个视图和2个控制器，每个一个，所以我正在寻找的是保持信息在第一个视图中的最佳方式（我有所有的结果）之前去比较视图）当用户回到第一个视图时。

到目前为止，我尝试使用$localstorage，但在第一个视图中，我有一个表单，用户可以过滤搜索标准，还有一些<select></select>由{ajax加载{1}}调用，所以..使用$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服务中存储要在视图中显示的任何数据。然后，您将该服务注入您的控制器。数据在服务中仍然存在，因为Angular中的服务是singletons。

Answer 2

查看ui路由器附加内容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('/');

当用户返回上一个视图时保留数据 - Angularjs

2 个答案: