Apply data dynamically to the state.go function and fetch it in the resolve property
I have a parent state:
.state('schoolyears', {
url: '/schoolyears',
views: {
'menu@': {
template: '<h1>Start your schoolyear action...</h1>'
},
'content@': {
templateUrl: "../views/schoolyear/schoolyears.html",
resolve: {
schoolyears: function (schoolyearService) {
return schoolyearService.getSchoolyears();
}
},
controller: 'SchoolyearsController'
}
}
})
.state('schoolyears.selected', {
url: '/:id'
})
and child state:
.state('schoolyears.selected.dates.day', {
url: '/day/:year-:month-:day',
views: {
'planner@schoolyears.selected.dates': {
templateUrl: '../views/lessonplanner/lessonplanner.day.html',
resolve: {
periods: function (periodService, $stateParams, $state) {
var schoolyearId = $stateParams.id;
var firstDayOfWeek = $state.current.data.firstDayOfWeek;
var periods = periodService.getPeriods(schoolyearId, firstDayOfWeek);
return periods;
}
},
controller: 'DateplannerDayController'
}
}
})
When I open the school year in SchoolyearController.js:
$scope.open = function () {
var entity = $scope.gridApi.selection.getSelectedRows()[0];
var firstDayOfWeek = entity.firstDayOfWeek;
$state.go('schoolyears.selected.dates.day', { id: $state.params.id}, {firstDayOfWeek: firstDayOfWeek}, {location: false, inherit: false});
};
I want to pass the firstDayOfWeek from the selected schoolyear element and I want to get this firstDayOfWeek value inside the ui router resolution via $ state.current.data.firstDayOfWeek but there is no variable like firstDayOfWeek.
How can I pass the data attached to state.go and get it from the ui router permission to load the data correctly?
source to share
As described here: Resolve , the resolver value can be a string or a function - Factory
.
This means that we have access to the DI of any Service we need. And also, in the angularjs world, Service - as a singleton - is the most proprietary way to share settings throughout an application. This would be the solution I would suggest. An adjusted plunker showing this idea can be found here .
We would have to introduce a service, for example. Setting up
.factory('Settings', function(){
return {
firstDayOfWeek : null,
};
})
We also need to bind this service to some custom links:
.controller('SchoolyearsController', function($scope, Settings, schoolyears){
$scope.Settings = Settings;
...
// bind the $scope.Settings.firstDayOfWeek to some selected value
And in our resolver:
periods: function (Settings, $stateParams) {
var periods = {
year: $stateParams.id,
firstDayOfWeek : Settings.firstDayOfWeek
};
return periods;
}
Check what's here . Perhaps the implementation of the example is a little more complicated, but I think the idea should be clear here.
source to share