Question

我有一个用AngularJS编写的单页面应用程序，并使用ui-router来管理状态转换（路由）。

搜索状态配置如下：

function config($stateProvider) {
  $stateProvider
    .state('social.search', {
      url: '/search',
      templateUrl: 'views/social/search/social-search-view.html',
      controller: 'SocialSearchController',
      controllerAs: 'vm'
    });
}

此视图呈现表单，控制器（SocialSearchController）负责获取这些输入，将它们提交给服务并显示结果。结果列表向用户显示为排名列表（如Google的搜索结果页面）。每个结果都有一个链接，可以转到新状态以显示有关条目的详细信息，例如：

<a ui-sref="social.profile({personId: person.id})">{{person.name}}</a>

social.profile状态用于应用程序的其他部分，因此它不是social.search的子项，它的配置如下：

function config($stateProvider) {
  $stateProvider.state('social.profile', {
    url: '/{personId}',
    templateUrl: 'views/social/profile/social-profile-view.html',
    controller: 'SocialProfileController',
    controllerAs: 'vm'
  });
}

它工作正常，我可以输入我的搜索，获得结果，然后单击以查看有关条目的详细信息。但是，当我点击后退按钮从详细视图转换回搜索视图时，我的输入和搜索结果都消失了。我知道这是默认和正确的行为，因为如果不再使用它，就不需要将控制器保留在内存中。

问题是，在这种特殊情况下，我希望控制器以某种方式保留在内存中，因此用户无需重新键入查询并发出另一个搜索服务请求。

我可以考虑将搜索状态保存到服务中并使控制器从中获取其初始状态，就像缓存服务只是为了存储最后一个控制器的状态。但是我很容易受到此同步过程中涉及的错误的影响，搜索表单有点复杂，因为它涉及自动完成和标记字段（我已经制作了自定义指令），因此同步将至少通过三个＆＃34;层＆＃34;：控制器状态，缓存服务，自定义输入。

这是正确的方法吗？我有什么选择？

Answer 1

我不确定ui-router是否在父节点和子节点之间保留控制器和数据，但如果是这种情况，你可以尝试复制＆＃34;你的州。

function config($stateProvider) {

 var socialProfile = {
    url: '/{personId}',
    templateUrl: 'views/social/profile/social-profile-view.html',
    controller: 'SocialProfileController',
    controllerAs: 'vm' } 

  $stateProvider
    .state('social.search', {
      url: '/search',
      templateUrl: 'views/social/search/social-search-view.html',
      controller: 'SocialSearchController',
      controllerAs: 'vm'
    });
    $stateProvider.state("social.search.detail', socialProfile);
    $stateProvider.state('social.profile', socialProfile);  
  }

在＆＃39; social.search＆＃39; -view中，您可以拥有一个特殊的href

<a ui-sref="social.search.detail({personId: person.id})">{{person.name}}</a>

在此配置中，您的socialProfile是一个子搜索状态，但也是一个独立的状态

如何在路由更改之间维护视图（控制器）状态？

1 个答案: