Comment envoyer et de récupérer des paramètres à l'aide de $état.aller toParams et $stateParams?

Si vous souhaitez passer des non-URL de l'état, alors vous ne devez pas utiliser url lors de la configuration de votre state. J'ai trouvé la réponse sur un PR et fait quelques monkeying autour pour mieux comprendre.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: {
    'referer': 'some default', 
    'param2': 'some default', 
    'etc': 'some default'
  }
});

Ensuite, vous pouvez accéder comme suit:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

Ou:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

Et en HTML, comme ceci:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

Ce cas d'utilisation est complètement à découvert dans la documentation, mais je pense que c'est un moyen puissant sur la transition de l'état sans l'aide d'Url.

Tout ce que j'avais à faire était d'ajouter un paramètre à l'url de la définition de l'état comme

url: '/toState?referer'

Doh!

Aucun de ces exemples sur cette page qui a travaillé pour moi. C'est ce que j'ai utilisé et ça a bien fonctionné. Certaines solutions a dit vous ne pouvez pas combiner url $à l'état.go() mais ce n'est pas vrai. L'ennui, c'est que vous devez définir les paramètres de l'url et de la liste des paramètres. Les deux doivent être présents. Testé sur Angulaire 1.4.8 et l'INTERFACE utilisateur du Routeur 0.2.15.

Dans le état ajouter votre params à la fin de l'état et de définir les paramètres:

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

Dans votre contrôleur votre déclaration ressemblera à ceci:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

Puis de tirer les paramètres et les utiliser dans votre nouvel état du contrôleur de (n'oubliez pas de passer dans $stateParams de votre fonction de contrôleur):

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!

J'ai passé un bon moment avec des combats Ionique /Angulaire de dollars de l'état & $stateParams;

D'utiliser $état.go() et $stateParams vous devez avoir certaines choses de configuration et d'autres paramètres ne doivent pas être présents.

Dans mon application.config (), j'ai inclus $stateProvider et définis dans plusieurs états:

$stateProvider
.state('home', {
    templateUrl: 'home',
    controller:  'homeController'
})
.state('view', {
    templateUrl: 'overview',
    params:      ['index', 'anotherKey'],
    controller:  'overviewController'
})

La params clé est particulièrement important. Ainsi, de l'avis il n'y a PAS url touches... en utilisant stateParams et les Url ne se mélangent PAS. Ils sont mutuellement exclusifs les uns des autres.

Dans le $état.go() de l'appel, de la définir en tant que tel:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

La index et anotherKey $stateParams variables ne sera généré si ils sont d'abord inscrites dans l' $stateController params la définition de la clé.

Dans le contrôleur, la somme de stateParams comme illustré:

app.controller('overviewController', function($scope, $stateParams) {
    var index = $stateParams.index;
    var anotherKey = $stateParams.anotherKey;
});

Le passé variables devraient être disponibles!

Je serais face à un problème similaire. J'ai fini avec une solution de travail, après beaucoup de recherches sur google et essai et de test. Voici ma solution qui pourrait fonctionner pour vous.

J'ai deux contrôleurs - searchBoxController et stateResultController et un paramètre nommé searchQuery à être transmis à partir d'une vue d'avoir une boîte de recherche pour une vue montrant les résultats récupérés à partir d'un serveur distant. C'est comment vous le faites:

Ci-dessous est le contrôleur à partir de laquelle vous appelez l'affichage suivant à l'aide de $state.go()

.controller('searchBoxController', function ($scope, $state) {
        $scope.doSearch = function(){
            var searchInputRaw = $scope.searchQueryInput;
            $state.go('app.searchResults', { searchQuery: searchInput });
        }
    })

Ci-dessous est l'état qui sera appelé lorsque le $state.go() est exécuté:

.state('app.searchResults', 
            {
                url: '/searchResults',
                views:
                {
                    'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
                },
                params: 
                {
                    'searchQuery': ''
                }
            })

Et enfin, le contrôleur associé à l' app.searchResults état:

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
        $scope.searchQueryInput = $stateParams.searchQuery;
    });

La solution nous est venu à avoir un état qui a pris les 2 paramètres a été en train de changer:

.state('somestate', {
  url: '/somestate',
  views: {...}
}

à

.state('somestate', {
  url: '/somestate?id=:&sub=:',
  views: {...}
}

Vos définir suivant router.js

$stateProvider.state('users', {
    url: '/users',
    controller: 'UsersCtrl',
    params: {
        obj: null
    }
})

Votre contrôleur besoin d'ajouter $stateParams.

function UserCtrl($stateParams) {
    console.log($stateParams);
}

Vous pouvez envoyer un objet en paramètre comme suit.

$state.go('users', {obj:yourObj});