Question

我将UI-Router用于简单的单页面应用程序。它只是一个可以排序和过滤的表。当您应用过滤器时，例如按升序排序列，URL会更新为：

www.domain.com#/column/'column name'/desc/false/

然后我使用$ stateParams获取参数，并相应地更新表。

 $scope.$on('$stateChangeSuccess', function (evt, toState, toParams, fromState, fromParams) {
            $scope.sorting.predicate = toParams.column;
            $scope.sorting.reverse = boolVal(toParams.sort);
        });

但是，如果我要访问www.domain.com#/column/'column name'/desc/false/，表格不会加载并过滤数据。我正在尝试以下（在向我的控制器注入$ stateParams之后）：

$scope.$on('$viewContentLoaded', function (event, viewConfig) {
            console.log('VCL stateParams: ' + angular.toJson($stateParams));
        });

但是，无论URL如何，stateParams始终为空（仅限于viewContentLoaded）。我似乎无法在页面加载时获取URL的参数。我做错了吗？

这是状态配置：

app.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider.state("name", {
            url: '/column/:column/desc/:sort/',
            controller: 'Ctrl',
            resolve: {
                logSomeParams: ['$stateParams', '$state', function ($stateParams, $state) {
                    console.log($stateParams);
                    console.log(this); // this is the state you transitioned From.
                    console.log($state); // this is the state you transitioned To.
                }]
            }
        });
        $urlRouterProvider.otherwise('/');
    }
]);

以下是调用状态更改的方法：

<a ui-sref="name({column:'\''+column+'\'',sort:sorting.reverse})" 
ng-click="sorting.predicate = '\'' + column + '\''; sorting.reverse=!sorting.reverse;">
{{column}}</a>

Answer 1

以下是我要进一步调查的几个选项。

选项1 ：$ rootScope侦听器

 $scope.$root.$on('$stateChangeSuccess', function (evt, toState, toParams, fromState, fromParams) {
   $scope.sorting.predicate = toParams.column;
   $scope.sorting.reverse = boolVal(toParams.sort);
 });

 $scope.$root.$on('$viewContentLoaded', function (event, viewConfig) {
   console.log('VCL stateParams: ' + angular.toJson($stateParams));
 });

选项2 ：解析对象

在你的州定义中，尝试添加：

resolve: {
  logSomeParams: ['$stateParams', '$state', function ($stateParams, $state) {
    console.log($stateParams);
    console.log(this); // this is the state you transitioned From.
    console.log($state); // this is the state you transitioned To.
  }]
}

请给出其中任何一个，让我知道你得到了什么结果。 resolve对象应该在$ viewContentLoaded之前运行，但是因为你真正感兴趣的是$ viewContentLoaded回调中的stateParams，所以也可以把它放在状态定义中。

祝你好运，卡斯帕。

修改：

尝试使用resolve对象为您的州提供父状态。

像这样：

$stateProvider.state('parentState', {
  url: '',
  abstract: true,
  resolve: {
    logSomeParams: ['$stateParams', '$state', function ($stateParams, $state) {
      console.log($stateParams);
      console.log(this); // this is the state you transitioned From.
      console.log($state); // this is the state you transitioned To.
    }]
  }      
});

$stateProvider.state("name", {
  url: '/column/:column/desc/:sort/',
  parent: 'parentState',
  controller: 'Ctrl'
});

让我知道这对你来说是怎样的。

Answer 2

想出来，非常不幸的是答案是多么简单。我需要注入$state。我只注射了$stateParams。你需要两者。希望这可以节省一些人的头发拉扯和尖叫。

初始$ stateParams为空？

2 个答案: