1

我正在实施注册服务,用户建议选择三个参数:建筑(沙龙),服务和公司(类别)。对于此任务,我使用ui-router作为AngularJS什么适当的方法来路由AngularJS中的状态链?

我创建原型六个相互嵌套的状态,像这样:

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

这种方法适用于这样的实现。简单用例通过: 运行应用程序与自定义网址:#/form/salons/1/services/2/categories/3它应该将在状态form.salons.services.categories。原型很好。

但是当我在生产应用程序中使用这种方法时,状态在第一次改变后不会改变。不同的是,在生产嵌套状态必须使用相同的ui-view而不是嵌套,我认为这是点,为什么国家没有改变。

当解析URL时,什么方法来处理状态变化?

+0

你试过'$ state.go()这样做 –

回答

1

为了得到一个国家应该如何工作的基本想法,你可以看到this github example

改变状态使用

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

通过使用这样的事情

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

我一直如此,不工作'方法。 – Juriy

+0

检查您的州名并发布错误您在那里犯了一些错误。 –

+0

我发现一个错误,$ state是未定义的。它是服务吗? – Juriy

相关问题