Avec ui-router
, il est possible d'injecter l'un $state
ou l' autre $stateParams
dans un contrôleur pour accéder aux paramètres de l'URL. Cependant, l'accès aux paramètres via $stateParams
n'expose que les paramètres appartenant à l'état géré par le contrôleur qui y accède, ainsi qu'à ses états parents, alors qu'il $state.params
contient tous les paramètres, y compris ceux de n'importe quel état enfant.
Compte tenu du code suivant, si nous chargeons directement l'URL http://path/1/paramA/paramB
, voici comment cela se passe lorsque les contrôleurs se chargent:
$stateProvider.state('a', {
url: 'path/:id/:anotherParam/',
controller: 'ACtrl',
});
$stateProvider.state('a.b', {
url: '/:yetAnotherParam',
controller: 'ABCtrl',
});
module.controller('ACtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id and anotherParam
}
module.controller('ABCtrl', function($stateParams, $state) {
$state.params; // has id, anotherParam, and yetAnotherParam
$stateParams; // has id, anotherParam, and yetAnotherParam
}
La question est, pourquoi la différence? Et existe-t-il des directives sur les meilleures pratiques concernant quand et pourquoi vous devriez utiliser ou éviter d'utiliser l'un ou l'autre?