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

Question

好像$stateParams不行.像这样传递日期:

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

params在目标状态被忽略

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

可以在这里找到实例

谢谢.

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}.

有关更多信息,请参阅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);
    }
});

相关问题: AngularJS的ui-router中没有URL的状态的参数

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

这是一个在jsfiddle上传递状态参数的工作示例.