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定义的一部分。 E.g。

$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。

Answer 2

如果您不想在网址中定义参数，则必须在要转换的状态中包含params属性。否则，数据将从$ stateParams对象中删除。 params对象的格式是旧版angular-ui-router中的字符串数组;在较新的版本中，它是一个空对象的对象：

params: { id: {}, blue: {}}

见这个例子：

$stateProvider.state('state1', {
    url: '',
    params: {
        id: 0,
        blue: ''
    },
    templateUrl: 'state-1.html',
    controller: function($scope, $state, $stateParams) {
        $scope.go = function() {
            $state.go('state2', {
                id: 5,
                blue: '#0000FF'
            });
        };

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

相关问题： Parameters for states without URLs in ui-router for AngularJS

Answer 3

仅将参数传递给状态是不够的。您必须在州的url属性中按名称明确定义参数。

如果你不这样做，ui-router不知道这个状态是期待一个参数，$stateParams对象将不会像你想要的那样填充。

以下是一个示例，说明如何修改状态以期望参数，注入$stateParams，并对所述参数执行某些操作：

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

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

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

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

Here is a working example of passing state params on jsfiddle.

Answer 4

上面的解决方案有效，但对于我的情况，我需要传递查询参数，所以我这样做：

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

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

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

Answer 5

运输并使用它！

angular_app.factory('$$transport', function($q) {
    var transport;
    return transport = {
        dfr: $q.defer(),
        push: function(v) {
            return transport.dfr.resolve(v);
        },
        then: function(s, f) {
            if (f == null) {
                f = function() {};
            }
            return transport.dfr.promise.then(function(_s) {
                s(_s);
                transport.dfr = $q.defer();
                return transport.then(s, f);
            }, function(_f) {
                f(_f);
                transport.dfr = $q.defer();
                return transport.then(s, f);
            });
        }
    };
});
$stateProvider.state('state1', {
            url: '/state1?other',
            templateUrl: 'state-1.html',
            controller : function ($scope, $state, $$transport) {
              $$transport.then(function(s) {
                $scope.param = s
                console.log('state1 params:', s);
              });
              $scope.go = function () {
                $state.go('state2', { someParam : 'broken magic' });
              }
            }
        })
        .state('state2', {
            url: '/state2?someParam',
            templateUrl: 'state-2.html',
            controller : function ($scope, $state, $$transport) {
              $scope.go = function () {
                $$transport.push({other:'lazy lizard'});
                $state.go('state1');
              };
            }
        });

角度UI路由器| $ stateParams不工作

5 个答案: