Angular UI-маршрутизатор | $stateParams не работает

похоже, что $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);
                }
            });
    });

Живой пример можно найти здесь

спасибо.

Ответы

Ответ 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}.

Для получения дополнительной информации см. документацию для маршрутизации URL-адресов UI-маршрутизатора.

Ответ 2

если вы не хотите определять свой параметр в URL-адресе, вы должны включить свойство 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);
    }
});

Связанный вопрос: Параметры для состояний без URL-адресов в ui-router для AngularJS

Ответ 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.

Ответ 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);
            }
        });

Ответ 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');
              };
            }
        });