Question

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

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

单击其中一个对象后，视图将更改为/berlinerliste/{id}/，并显示特定对象的详细信息。

问题在于使用/berlinerliste/{id}/网址重新加载其中一个单独对象，导致页面没有数据。

以下是我的服务方式：

.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路由器工作人员的Plunkr示例，他们完全按照我要做的那样做。对他们来说，它是有效的，对我来说它没有。

Answer 1

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

UI路由解析不在页面重新加载

更新

1 个答案: