如果特定的stateParam为空,如何重定向到状态 [英] How to redirect to state if specific stateParam is empty
问题描述
我不确定我的操作方式是否正确,任何建议都将不胜感激.
I'm not sure if the way I am doing it is correct, any advice would be appreciated.
我有一个餐厅选择器,用户可以从中选择餐厅.然后,所有其他子州都加载特定于所选餐厅的内容.但是我需要默认选择一个子状态,包括一个餐厅,该餐厅将根据用户最近的位置或如果他们以前选择过一个cookie数据来选择.但是,我不确定如何在不知道餐厅ID的情况下默认情况下如何重定向到子状态?
I have a Restaurant Selector, which the user can select a restaurant from. Then all other child states load up content specific to the restaurant selected. But I need to have a child state selected by default, including a restaurant, which will be either selected based on the users closest location or on cookie data if they have previously selected one. But, i'm not sure how I can redirect to a child state by default without knowing the restaurant id already?
下面我的代码的混搭版本来说明.
A bastardised version of my code below to illustrate.
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/restaurant/[some id based on cookie info]/our-food"); // if no id is set, then I want to get it from a cookie, but then how do i do the redirect?
$stateProvider
.state('restaurant', {
url: '/restaurant/:restaurantId',
template: "<ui-view/>",
controller: function($state, $stateParams, Data, RestaurantService, $cookieStore) {
if(typeof $stateParams.restaurantId !== 'undefined') {
// get the restaurantID from the cookie
}
}
})
.state('restaurant.our-food', {
url: '/our-food',
templateUrl: function($stateParams) {
return 'templates/food-food.html?restaurantId=' + $stateParams.restaurantId;
},
controller: 'SubNavCtrl'
})
.state('restaurant.glutenfree-vegetarian', {
url: '/glutenfree-vegetarian',
templateUrl: function($stateParams) {
return 'templates/food-vegetarian.html?restaurantId=' + $stateParams.restaurantId;
},
controller: 'SubNavCtrl'
})
下面的图片说明了前端发生的情况: www.merrywidowswine.com/ss.jpg
An image below to illustrate what is happening on the front end: www.merrywidowswine.com/ss.jpg
推荐答案
我将创建一个每次打开该特定状态时都会触发的事件.
I would create an event that is fired every time you open that specific state.
查看他们的文档: https://github.com/angular- ui/ui-router/wiki#onenter-and-onexit-callbacks
所以我的猜测是这样的
1. onEnter回调到餐厅状态(推荐)
$stateProvider.state("contacts", {
template: '<ui-view>',
resolve: ...,
controller: function($scope, title){
},
onEnter: function(){
if(paramNotSet){ $state.go(...)}
}
});
我自己从来没有使用过这样的活动,因此您可能必须做一些有决心的体操运动,但是我相信这是最干净,最容易理解且最可维护的解决方案.
I've never used an event as such myself so you might have to do some gymnastics with resolve, but I believe this is the cleanest, easiest to understand and most maintainable solution.
2个全局onStateChangeStart事件 全球事件(尽管每次状态更改都会触发此事件)
2 Global onStateChangeStart event A global event (although this would get fired for every state change)
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){ ... //check cookie, change state etc ...})
3在控制器中 或者,如果您想像开始一样使用控制器.
3 In the controller Alternatively If you want to use the controller like you started doing.
controller: ['$state', '$stateParams', 'Data', 'RestaurantService', '$cookieStore',
function($state, $stateParams, Data, RestaurantService, $cookieStore) {
if(typeof $stateParams.restaurantId !== 'undefined') {
sate.go('restaurant', $cookieStore['restaurant'])
}
}]
就开发而言,这可能是最快的解决方案,但我相信使用事件会更清洁,并且使代码更容易理解.
This is probably the fastest solution in terms of development but I believe using events is cleaner and makes for more understandable code.
注意:我实际上没有运行任何此类代码,因此可能无法正常工作,它只是伪代码,可让您了解去向.如果您遇到问题,请告诉我.
Note: I haven't actually run any of this code so it might not work, it's just pseudo-code to give you an idea of where to go. Let me know if you run into issues.
编辑:完全不知道是否将stateParams传递给控制器.您可能必须使用resolve来访问它们.
EDIT: Acutally I'm not sure if stateParams are passed on to the controller. You might have to use resolve to access them.
编辑:要访问onEnter回调或控制器中的stateParams,我相信您必须这样使用resolve:
EDIT: to access stateParams in onEnter callback or the controller, I believe you have to use resolve as such:
resolve: {
checkParam: ['$state','$stateParams', '$cookieStore', function($state, $stateParams, $cookieStore) {
//logic in here, what it returns can be accessed in callback or controller.
}]
有关更多示例/更好的解释,请参见ui-router文档上的解决方法
see the ui-router doc on resolve for more examples/better explanation
这篇关于如果特定的stateParam为空,如何重定向到状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!