Question

我已经使用$ state.go传递了一名＆＃39;员工＆＃39; object作为页面的参数，其中id也用作url中的参数，但是当刷新页面时，所有$ stateParams都将从状态中清除。

如何防止这种情况发生，并以某种方式存储员工的数据（正如我所说，员工ID在url中使用），这样当页面刷新时，$ stateParams仍然会填充此员工＆＃39 ; s数据基于网址中的ID？

州定义：

 .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');
            }
        }
    })

$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

您需要在路径定义中添加另一个名为：employee

的项目

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

但是因为员工是一个对象 - 所以除非你想要将每个项目定义为URL中的一个参数，或者当你从后端到达员工本身的状态时根据id进行查找...你还有其他的选项。

使用服务存储员工信息
localStorage的

更新：

因此，基于看起来唯一真正的选择应该是根据路由中传递的ID进行后端查询以获取员工信息。这是基于这样一个事实，即最终用户可能直接在页面上结束，这意味着很有可能信息将无法在服务或本地存储中使用 - 您可以检查它是否在那里，如果没有请求（智能服务）。

Answer 2

.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');
            }
        }
    });

使用querystring params li这些将在刷新后保留它们。有关详情，请查看文档ui-router query params

Answer 3

您可以使用

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

并从$stateParams获取所需的参数，或者使用最新版本 $transation$ 或state上的resolve

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

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

如果没有任何帮助，您可以使用cache

Angular UI-Router - 页面刷新失去了$ stateParams

3 个答案: