Angular UI-Router - Page refresh loses $stateParams

Question

I've used $state.go to pass in an 'employee' object as a parameter to a page where the id is also used as a parameter in the url, but when the page is refreshed, all $stateParams are cleared from the state.

How can I prevent this from happening, and somehow store the data for the employee (as I said, employee id is used in url), so that when the page is refreshed, $stateParams is still populated with this employee's data based upon the id in the url?

State definition:

 .state('employees/employeeDetails', {
        url: '/employees/employeeDetails/:id',
        templateUrl: 'views/employees/employeeDetails/employeeDetails.html',
        params: {
            employee: null,
            id: null
        },
        controller: 'employeeDetailsMainController',
        controllerAs: 'employeeDetailsMain',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/employeeDetailsMainController.js');
            }
        }
    })

Directive with $state.go:

app.directive('viewEmployee', function() {

var directive = {
    restrict: 'A',
    scope: {
        employee: '=',
        state: '@state'
    },
    controller: function($scope, $state, $stateParams) {
        $scope.goToEmployee = function() {
            $state.go('employees/employeeDetails', { employee: $scope.employee, id: $scope.employee.id });
        }
    },
    bindToController: {
        employee: '='
    },
    link: function(scope, element, attrs) {
        element.find('button').bind('click', function(index, employee) {
            scope.goToEmployee();
        })
    }
}
return directive;
})

Answer 1

.state('employees/employeeDetails', {
        url: '/employees/employeeDetails?employee&id',
        templateUrl: 'views/employees/employeeDetails/employeeDetails.html',
        controller: 'employeeDetailsMainController',
        controllerAs: 'employeeDetailsMain',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/employeeDetailsMainController.js');
            }
        }
    });

use querystring params li these it will retain them after refresh. for more info check doc ui-router query params

Answer 2

you need to add in the route definition another item called :employee

    url: '/employees/employeeDetails/:id/:employee'

But since employee is an object - so unless you wanna define each item as a param in the url or do a lookup based on the id when you get to the state of the employee itself from the backend... you have other options.

1. use a service to store the employee info
2. localStorage

UPDATE:

So based on what it seems the only genuine option should be to make a backend query to fetch the employee info based on the ID passed in the route. This is based on the fact that an end user could end up directly on the page and such means that there is a good chance the info will not be available in the service or the localstorage - you could check if its there and if not make a request (smart service).

Answer 3

You can use

$location.search($location.search('employeeDetails', { employee: 
$scope.employee, id: $scope.employee.id });

and than get parameters that you need from $stateParams or if you use newest version $transation$ or on state on resolve

selectedFromUrl: ($location) => {
                 'ngInject';

                 return $location.search().employeeDetails;
            },

If nothing help you can use cache