在 Ui-Router 上解析的错误时间或功能顺序 [英] Bad timing or order of functions with resolves on Ui-Router

问题描述

我有一个应用程序，其中我的主状态进行解析，进行 http 调用并获取数组.

I have an app where my main state makes a resolve makes an http call and fetches an array.

然后，子数组应该显示该数组中的一个对象，但似乎控制器中的变量定义过早且未正确更新，因此子数组为空.

Then, the child array is supposed to display one object from this array, but it seems that the variables from the controller are defined too early and don't get updated properly, so the child comes out empty.

我在没有 http 调用的情况下尝试过 (var array = [array])，它工作正常，但在 http 调用中不行.

I've tried it without http call (var array = [array]), and it works fine, but not with the http call.

有关如何解决此问题的任何提示?

Any tips on how to fix this?

这是控制器:

.controller('appCtrl',['$scope', 'SearchService','fair', function($scope, SearchService, fair){

  $scope.data = SearchService;
  $scope.datafairs = $scope.data.flatexhibitors;
  console.log($scope.datafairs);
}])

.controller('ChildController',['$scope', 'exhibitor', '$filter', function($scope, exhibitor, $filter){

  $scope.$watch(function() { return $scope.fair; }, function(newVal) { 
    $scope.fairs = newVal;
    console.log($scope.fairs);
    $scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
  }, true);


}])

服务:

.factory("SearchService", function($http) {  

  var service = {
    flatexhibitors : [],
    datafairs : [],
    getAllExhibitors : function (wop) {
      var searchindex = wop;
        console.log(searchindex);
        var url = '../register/backend/databaseconnect/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;
        });
    }   
  }
  return service;

})

还有州:

.config(function($stateProvider) {


  $stateProvider.state('berliner', {
    url: '/berlinerliste',
    params : {search: 'Berliner 2017'},
    resolve: {
      fair: function(SearchService, $stateParams) {
        return SearchService.getAllExhibitors($stateParams.search);
      }
    },
    views: {
      'header': {   
        templateUrl: 'header.htm'   
      },
      'main':{    
        templateUrl: 'bl2017.htm',
        controller: 'appCtrl'
      }    
    }
  })

  .state('berliner.exhibitor', {
    url: '/{id}', 
    resolve: {
      exhibitor: function($stateParams) {
        var slug = $stateParams.id;
        return slug;
      }
    },
    views: {
      'header': {   
        templateUrl: 'header.htm'   
      },
      'wop':{    
        templateUrl: 'exhibitor.htm',
        controller: 'ChildController'
      }    
    }
  })

})

我设法在 Plunkr 中复制了该问题.

I've managed to replicate the issue in a Plunkr.

推荐答案

更改 getAllExhibitors 以返回如下 promise :

Change the getAllExhibitors to return a promise like below:

getAllExhibitors : function (wop) {
  var searchindex = wop;
    console.log(searchindex);
    var url = '../register/backend/databaseconnect/getexhibitors.php';
    var config = {
        params: {
            search: searchindex
        },
        cache:true
    };
    return $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;
    });
}

这篇关于在 Ui-Router 上解析的错误时间或功能顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！