angularjs - Angular UI路由器| $ stateParams不起作用

Question

好像$stateParams无法正常工作。
通过日期是这样的:

$state.go('state2', { someParam : 'broken magic' });

在目标状态上忽略参数

console.log('state2 params:', $stateParams); // return empty object {}

代码:

    var app = angular.module('app', [
     'ui.router'
    ]);

    app.config(function($stateProvider) {
      $stateProvider
            .state('state1', {
                url: '',
                templateUrl: 'state-1.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state2', { someParam : 'broken magic' });
                  };

                  console.log('state1 params:', $stateParams);
                }
            })
            .state('state2', {
                url: 'state2',
                templateUrl: 'state-2.html',
                controller : function ($scope, $state, $stateParams) {
                  $scope.go = function () {
                    $state.go('state1', { someOtherParam : 'lazy lizard' });
                  };

                  console.log('state2 params:', $stateParams);
                }
            });
    });

可以找到实时示例here

谢谢。

Answer 1

您不能在状态之间传递任意参数，需要将它们定义为$stateProvider定义的一部分。例如。

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            console.log($stateParams);
        }
    }) ...

上面的代码将输出定义了contactId属性的对象。如果转到/contacts/42，则$stateParams将为{contactId: 42}。

有关更多信息，请参见documentation for UI-Router URL Routing。