如何重定向到狀態，如果特定的stateParam爲空

我不知道如果我這樣做的方式是正確的，任何意見將不勝感激。如何重定向到狀態，如果特定的stateParam爲空

我有一個餐廳選擇器，用戶可以從中選擇一家餐館。然後，所有其他的孩子狀態都會加載特定於所選餐廳的內容。但是我需要默認選擇一個孩子狀態，包括一個餐廳，根據用戶最近的位置選擇一個餐廳，如果他們之前選擇了一個，則選擇cookie數據。但是，我不知道如何在默認餐館ID的情況下重定向到兒童狀態？

我的代碼的一個混蛋版本下面來說明。

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

來源

2013-12-17 Ben Southall

我會創建一個觸發每次打開特定狀態時的事件。

檢查他們的文檔：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(...)} 
    } 
});

我從來沒有使用事件本身就是這樣，所以你可能不得不做一些體操運動，但我相信這是最清晰，最容易理解和最可維護的解決方案。

2全球onStateChangeStart事件 一個全球性的事件（雖然這會被解僱的每一個狀態的改變）

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ ... //check cookie, change state etc ...})

3在控制器 或者如果你想使用的控制器就像你開始這樣做。

controller: ['$state', '$stateParams', 'Data', 'RestaurantService', '$cookieStore', 
function($state, $stateParams, Data, RestaurantService, $cookieStore) { 
    if(typeof $stateParams.restaurantId !== 'undefined') { 
     sate.go('restaurant', $cookieStore['restaurant']) 
    } 
}]

這可能是在發展方面最快的解決辦法，但我相信使用事件是更清潔，讓更多的可以理解的代碼。

注意：我沒有真正運行這些代碼，所以它可能不起作用，它只是僞代碼，讓你知道該去哪裏。如果遇到問題，請告知我。

編輯：Acutally我不知道是否stateParams傳遞給控制器。您可能必須使用解析來訪問它們。

編輯：訪問的OnEnter回調或控制器stateParams，我認爲你必須使用決心，這樣的：

resolve: { 
     checkParam: ['$state','$stateParams', '$cookieStore', function($state, $stateParams, $cookieStore) { 
//logic in here, what it returns can be accessed in callback or controller. 
     }]

看到UI路由器文檔上解決了更多的例子/更好的解釋

來源

2013-12-17 18:35:27 NicolasMoise

謝謝，這確實指向了我正確的方向，我將會有一個戲劇，看看我是否能夠完成所有工作。乾杯! –

你的＃1解決方案的問題（我有）是所有解析屬性在執行'onEnter'前解析。我在github上開始了一個問題：https：//github.com/angular-ui/ui-router/issues/1102。如果您不希望在重定向之前解析已解析的參數（例如，如果路由需要特定參數），我不確定是否存在隱藏的短路。 – Beez

而不是'$ state.transitionTo'可能會更好地使用'$ state.go'，正如[here]所述（https://github.com/angular-ui/ui-router/wiki/Quick-Reference#狀態-1） – Daniele

我需要得到這個工作，所以細節從@NicolasMoise添加到答案：

.state('restaurant', { 
    url: '/restaurant/:restaurantId', 
    template: "<ui-view/>", 
    onEnter: function ($state, $stateParams, $cookies) { 
     console.log($stateParams.restaurantId); 
     if (!$stateParams.restaurantId) { 
     $stateParams.restaurantId = $cookies.restaurantId; 
     $state.go('restaurant.restaurantID'); 
     } 
    }, 
})

我沒有測試這個cookie的部分，但條件和狀態的變化工作。

來源

2016-05-16 15:48:36 shanemgrey

如何重定向到狀態，如果特定的stateParam爲空

回答

相關問題