Quelle méthode appropriée pour acheminer la chaîne d'états dans AngularJS?

Question

J'implémente le service d'inscription, où l'utilisateur suggère de choisir trois paramètres: bâtiment (salon), service et compagnie (catégorie). J'utilise ui-router pour AngularJS pour cette tâche.

J'ai créé prototype avec six imbriqué dans chacun d'autres Etats comme ceci:

angular.module('ngApp', ['ngAnimate', 'ui.router']) 
.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
    .state('form', { 
    url: '/form', 
    template: '<div ui-view></div>', 
    controller: 'dummyController' 
    }) 
    .state('form.salonChoose' ,{ 
    url:'/salChoice', 
    template: '<button ng-click="changeSalon()">salon 99</button>' 
    }) 
    .state('form.salons', { 
    url: '/salons/:salonId', 
    template: '<div>{{model.salon}}</div>' + 
    '<div ui-view></div>', 
    controller: function($scope, $stateParams) { 
     $scope.model.salon = $stateParams.salonId; 
     location.href = '/#/form/salons/'+$scope.model.salon+'/serviceChoice'; 
    } 
    }) 
    .state('form.salons.serviceChoice', { 
    url:'/serviceChoice', 
    template: '<button ng-click="changeService()">service 99</button>' 
    }) 
    .state('form.salons.services', { 
    url: '/services/:serviceId', 
    template: '<div>{{model.service}}</div>' + 
    '<div ui-view></div>', 
    controller: function($scope, $stateParams) { 
     $scope.model.service = $stateParams.serviceId; 
     location.href = '/#/form/salons/'+$scope.model.salon+'/services/' 
     +$scope.model.service+'/catChoice'; 
    } 
    }) 
    .state('form.salons.services.catChoice', { 
    url:'/catChoice', 
    template: '<button ng-click="changeCat()">cat 99</button>' 
    }) 
    .state('form.salons.services.categories', { 
    url: '/categories/:catId', 
    template: '<div>{{model.cat}}</div>', 
    controller: function($scope, $stateParams) { 
     $scope.model.cat = $stateParams.catId; 
    } 
    }); 
$urlRouterProvider.otherwise('/form/salChoice'); 

Cette approche fonctionne dans une telle mise en œuvre. Cas d'utilisation simple à transmettre: exécuter l'application avec l'URL personnalisée: #/form/salons/1/services/2/categories/3 et il devrait être à l'état form.salons.services.categories. Et le prototype fonctionne bien. Mais lorsque j'utilise une telle approche dans mon application de production, les états ne sont pas modifiés après le premier changement. La différence est que dans la production des états imbriqués ont dû utiliser le même ui-view au lieu de niché, je pense que c'est le point, pourquoi les états n'ont pas changé.

Quelle est la bonne façon d'aborder l'état changeant alors que l'URL a été analysée?

Answer 1

Pour avoir une idée de base du fonctionnement des états, vous pouvez voir this github example.

pour les états changeants utiliser

$scope.changeState = function() { 
    $state.go('any.state.you.want.', {param: param}); 
}; 

en utilisant quelque chose comme ça

<button ng-click="changeState()">Another state</button>