I am facing an issue in my AngularJS application while using ui-router. There are three states set up - the parent state controller resolves a promise upon a successful request, and then executes the necessary code.
In the child state portfolio.modal.patent, I am using $stateProvider and the resolve method to make another request. The problem arises when I need the resolve method to wait until the promise returned in the parent controller portfolio is fulfilled.
States
$stateProvider
.state('portfolio', {
url: '/portfolio',
templateUrl: 'app/templates/portfolio/portfolio.tpl.htm',
controller: 'portfolioCtrl',
controllerAs: '$ctrl',
})
.state('portfolio.modal', {
abstract: true,
views: {
"modal": {
templateUrl: "app/templates/patent/modal.html"
}
}
})
.state('portfolio.modal.patent', {
url: '/:patentId',
resolve: { //NEED TO MAKE THIS RESOLVE AFTER PORTFOLIO CONTROLLER HAS RETURNED ITS PROMISE
patent: ['$stateParams', 'patentsRestService', function($stateParams, patentsRestService) {
return patentsRestService.fetchPatentItem($stateParams.patentId);
}],
}
}
Portfolio controller
function portfolioCtrl() {
$scope.promise
.then(function(response) {
//WHEN PROMISIS RETURNED, THEN RESOLVE DATA IN PORTFOLIO.MODAL.PATENT
})
}
Question
How can I ensure that the data for the child state portfolio.modal.patent is resolved only after the promise has been returned by the parent state controller portfolioCtrl