UI Route 解析在页面重新加载时不起作用

Question

我有一个使用 UI Route 进行视图路由的应用。

在/berlinerliste/ 上，它触发一个函数并显示一个对象数组。

点击这些对象之一时，视图将变为/berlinerliste/{id}/，并显示特定对象的详细信息。

问题是在这些带有/berlinerliste/{id}/ URL 的单个对象之一上重新加载页面时，这会导致页面没有数据。

我的服务如下所示：

.factory('SearchService', ['$http', function($http) {

  var service = {

    flatexhibitors : [],
    datafairs : [],
    flatexhibitorsuni : [],
    datafairsuni : [],

    getAllExhibitors : function () { //first call to get all items on page load
        var searchindex = 'XX';
        var url = '../getexhibitors.php';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        $http.get(url, config).then(function (data) {
          service.datafairs = data.data.rows;
          for (var i in service.datafairs) {
            service.flatexhibitors.push(service.datafairs[i].doc);
          };
          return service.flatexhibitors;
        });
    },

    getAllPeople: function() { // call to reload data and the filter it 
      var searchindex = 'XX';
      var url = '../getexhibitors.php';
      var config = {
          params: {
              search: searchindex
          },
          cache:true
      };
      return $http.get(url, config).then(function (resp) {
        service.datafairsuni = resp.data.rows;
        for (var i in service.datafairs) {
          service.flatexhibitorsuni.push(service.datafairs[i].doc);
        };
        return service.flatexhibitorsuni;
        console.log(service.flatexhibitorsuni);
      });
    },

    findExh : function(id){
      function personMatchesParam(exhibitor) {
        return exhibitor.slug === id;
        console.log(exhibitor.slug);
      }
      return service.getAllPeople().then(function (data) {
        return data.find(personMatchesParam)
      });

    }
  }

  service.getAllExhibitors();

  return service;

}])

这是我的视图配置的样子：

.config(function($stateProvider) {

  var berlinerState = {
    name: 'berliner',
    url: '/berlinerliste/',
    views: {
      'header': {   
        templateUrl: 'header.htm'   
      },
      'main':{    
        templateUrl: 'bl2017.htm'    
      }
    }
  }

  var exhibitorState = { 
    name: 'exhibitor', 
    url: '/berlinerliste/{id}', 
    views: {
      'header': {   
        templateUrl: 'header.htm'  
      },
      'main':{    
        templateUrl: 'exhibitor.htm'    
      }
    },
    resolve: {
      exhibitor: function(SearchService, $stateParams) {
        return SearchService.findExh($stateParams.id);
      }
    }
  }

  $stateProvider.state(berlinerState);
  $stateProvider.state(exhibitorState);
})

除了 /berlinerliste/{id}/ 重新加载不起作用这一事实之外，它还会减慢速度，因为每次点击对象时，我都会：

• 进行 http 调用（如果不是页面重新加载，则冗余，就像我之前在页面加载时所做的那样）
• 按 id 过滤项目
• 如果结果来自/berlinerliste/，则正确显示结果，在页面重新加载时不显示任何内容。

关于如何解决此问题的任何提示？

我认为理想情况下，冗余的 http 调用（以及整个解析）应该只在页面重新加载时进行，而不是在来自父 URL 时进行。

我错过了什么？

你可以看直播here

更新

请参阅 UI Router 人员的 Plunkr 示例，他们完全按照我的要求进行操作。对他们有效，对我无效。

Answer 1

重新加载页面相当于重新启动您的应用程序。由于它是一个单页应用程序，它只会导致丢失所有数据，因为现在工厂、服务、控制器等将被重新加载。您要么从服务器再次获取该数据，要么将其保存在浏览器的本地存储中。我建议您从 url 中获取 id，并将您的 api 调用从父路由转移到子路由，即#!/berlinerliste/{id}。