Ui-Routerでの解決のタイミングまたは機能の順序が正しくありません

Question

私の主な状態が解決を行うアプリケーションを持っているので、http呼び出しが行われ、配列がフェッチされます。

その後、子配列は、この配列から一つのオブジェクトを表示するようになっているが、コントローラからの変数があまりにも早く定義され、正常に更新されませんようですので、子供が空に出てきます。

ではなく、HTTP呼び出しで、私は、httpコール（var array = [array]）なしでそれを試してみた、それが正常に動作します。

これを修正する方法についてのヒントを教えてください。

は、ここでのコントローラです：

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