javascript - 在 AngularJS 中通过状态链路由的正确方法是什么？

Question

我正在实现注册服务，建议用户选择三个参数:建筑物(沙龙)、服务和公司(类别)。我将 ui-router 用于 AngularJS 来完成这项任务。

我创建了一个原型(prototype)，其中六个嵌套在彼此的状态中，如下所示:

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

这种方法适用于这样的实现。要传递的简单用例:使用自定义 url 运行应用程序:#/form/salons/1/services/2/categories/3，它应该处于状态 form.salons.services.categories。原型(prototype)效果很好。

但是当我在我的生产应用程序中使用这种方法时，状态在第一次更改后不会更改。不同之处在于，在生产中，嵌套状态必须使用相同的 ui-view 而不是嵌套，我认为这就是为什么状态没有改变的原因。

在解析 url 时处理状态更改的正确方法是什么？

Answer 1

要了解状态应该如何工作的基本概念，您可以查看 this github example .

改变状态使用

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

通过使用这样的东西

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