My routes using ui-router are structured like this:
$stateProvider
.state('studies', {
url: '/studies?all&field&term&page&sort&sort_dir',
templateUrl: 'scripts/studies/studies.template.html',
controller: 'StudiesController',
onExit: function exitStudies(filterQuery) {
filterQuery.emptyQuery();
},
menuElement: 'studies',
resolve: {
attributes: function (manageAttributes, attributeDefinition, $q) {
console.log('resolve');
var promises = {
columnDefinitions: attributeDefinition.fillColumnsDefinitions(),
userColumns: manageAttributes.queryAttributes()
}
return $q.all(promises)
.then(function (response) {
var attributes = _.map(response.userColumns, function (object) {
return _.find(manageAttributes.getAllAttributes(), function (attribute) {
return attribute.name === object.name;
});
});
manageAttributes.setAttributes(attributes);
});
}
}
});
['favorites-list', 'favorites-filter', 'default-filter'].forEach(function(directive) {
$stateProvider.state('studies.' + directive, {
template: '<' + directive + '></' + directive + '>'
});
});
When I navigate to a child route named "favorites," the resolve is triggered even though there is no URL specified for the child route. I intentionally did not want the URL to change when navigating to the child route.
Upon adding the following code:
.run(function($rootScope, $state) {
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
console.log('state: ' + fromState.name + ' -> ' + toState.name);
});
});
I noticed the following messages in the console:
resolve
state: -> studies
resolve
state: studies -> studies.favorites-list
This raises the question: why is the resolve being triggered when navigating to a child route?