Eric Mitjans Eric Mitjans - 1 year ago 51
AngularJS Question

Bad timing or order of functions with resolves on Ui-Router

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.

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?

Here's the controllers:

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


}])


The service:

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

})


And the states:

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

})


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

Answer Source

Inject $q like this: .factory("SearchService", function($http, $q) {

Change the getAllExhibitors to return a promise like below:

getAllExhibitors : function (wop) {
  var deferred = $q.defer();
  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);
      };
      deferred.resolve(service.flatexhibitors);
    }, function (error) {
      console.log(error);
      deferred.reject(error);
    });
    return deferred.promise; 
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download