web-dev-qa-db-fra.com

angular Routeur d'interface utilisateur | $ stateParams ne fonctionne pas

semble que $stateParams ne fonctionne pas. date de passage comme ceci:

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

paramètres ignorés sur l'état cible

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

code:

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

Exemple vivant peut être trouvé ici

je vous remercie.

angularjsangular-ui-router
30
Asaf Katz

Vous ne pouvez pas passer de paramètres arbitraires entre les états, vous devez les définir dans le cadre de votre $stateProvider définition. Par exemple.

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

Ce qui précède générera un objet avec la propriété contactId définie. Si vous allez à /contacts/42, votre $stateParams sera {contactId: 42}.

Reportez-vous à documentation relative au routage d’URL UI-Router pour plus d’informations.

63
kba

si vous ne souhaitez pas définir votre paramètre dans l'URL, vous devez inclure une propriété params sur l'état vers lequel vous effectuez la transition. Sinon, les données seront supprimées de l'objet $ stateParams. Le format de l'objet params est un tableau de chaînes dans les anciennes versions de angular-ui-router; dans les versions plus récentes, c'est un objet d'objets vides:

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

Voir cet exemple:

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

Question associée: Paramètres pour les états sans URL dans le routeur ui pour AngularJS

53
hmd.ai

Passer des paramètres à un état ne suffit pas. Vous devez définir le paramètre explicitement par son nom dans la propriété url de votre état.

Si vous ne le faites pas, ui-router ne saura pas que cet état attend un paramètre et le $stateParams objet ne sera pas rempli comme vous le souhaitez.

Voici un exemple de la manière dont vous pourriez modifier votre état pour attendre un paramètre, injectez $stateParams et faites quelque chose avec ce paramètre:

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

Voici un exemple pratique de passage de paramètres d'état à jsfiddle.

6
Nick

les solutions ci-dessus fonctionnent, mais dans mon cas, je devais passer le paramètre de requête, alors je le dis comme ceci:

$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);
            }
        });
2
Asaf Katz

Faites un transport et utilisez-le!

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');
              };
            }
        });
1
xema