我正在实施注册服务,用户建议选择三个参数:建筑(沙龙),服务和公司(类别)。对于此任务,我使用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时,什么方法来处理状态变化?
你试过'$ state.go()这样做 –