Attach data dynamically to state.go function and retrieve in 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 a 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 a schoolyear in the 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 item and I want to retrieve this firstDayOfWeek value inside the resolve of the ui router via $state.current.data.firstDayOfWeek but there is no such variable like firstDayOfWeek.

How can I pass data attached to state.go and get it from the ui router resolve to load the data correctly?

回答1:

As documented here: Resolve, the value of resolver could be string or a function - the Factory.

That means, that we do have access to DI of any Service we need. And also, in angularjs world, Service - as a singleton, is the most proprieate way how to share settings accross the application. That would be solution I would suggest to go. The adjusted plunker, showing that idea could be found here.

We would have to introduce a service, e.g. Setting

.factory('Settings', function(){
  return {
    firstDayOfWeek : null,
  };
})

We also have to bind that service to some user peferences:

.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 that here. Maybe the example implementation is a bit more complex, but I believe that idea here should be clear

来源：https://stackoverflow.com/questions/26023684/attach-data-dynamically-to-state-go-function-and-retrieve-in-resolve-property