與UI的路由器

Question

我有一個應用程序在我的主狀態，使下決心，使HTTP調用，並獲取數組做出決議時機不好或命令的功能。

然後，孩子陣列應該顯示此數組中一個對象，但似乎來自控制器的變量太早定義，不得到正確​​更新，等孩子出來空。

我已經試過了沒有HTTP調用（var array = [array]），它工作正常，但不能與HTTP調用。

關於如何解決此問題的任何提示？

這裏的控制器：

.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。

Answer 1

更改getAllExhibitors返回一個promise象下面這樣：

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; 
    }); 
}