![](/img/trans.png)
[英]angular ui-router: get $state info of toState in resolve
[英]Using $state methods with $stateChangeStart toState and fromState in Angular ui-router
我正在為$stateChangeStart
寫一個處理程序:
var stateChangeStartHandler = function(e, toState, toParams, fromState, fromParams) {
if (toState.includes('internal') && !$cookies.MySession) {
e.preventDefault();
// Some login stuff.
}
};
$rootScope.$on('$stateChangeStart', stateChangeStartHandler);
toState
沒有include方法。 我應該做些不同的事情,還是有辦法做我想做的事情?
另外,當//一些登錄內容包含$state.go(...)
,我得到一個無限循環。 是什么原因造成的?
這是一個更完整的示例,展示了我們最終要進行的工作:
angular.module('test', ['ui.router', 'ngCookies'])
.config(['$stateProvider', '$cookiesProvider', function($stateProvider, $cookiesProvider) {
$stateProvider
.state('public', {
abstract: true
})
.state('public.login', {
url: '/login'
})
.state('tool', {
abstract: true
})
.state('tool.suggestions', {
url: '/suggestions'
});
}])
.run(['$state', '$cookies', '$rootScope', function($state, $cookies, $rootScope) {
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
if (toState.name.indexOf('tool') > -1 && !$cookies.Session) {
// If logged out and transitioning to a logged in page:
e.preventDefault();
$state.go('public.login');
} else if (toState.name.indexOf('public') > -1 && $cookies.Session) {
// If logged in and transitioning to a logged out page:
e.preventDefault();
$state.go('tool.suggestions');
};
});
});
我不喜歡使用indexOf
在toState
搜索特定狀態。 感覺很幼稚。 我不確定為什么toState
和fromState
不能是$state
服務的實例,或者為什么$state
服務不能在其方法中接受狀態配置重寫。
無限循環是由我們方面的錯誤引起的。 我不喜歡這個,所以我還在尋找更好的答案。
將對象添加到$stateProvider.state
,該對象隨狀態一起傳遞。 因此,您可以添加其他屬性,以便以后在需要時閱讀。
路由配置示例
$stateProvider
.state('public', {
abstract: true,
module: 'public'
})
.state('public.login', {
url: '/login',
module: 'public'
})
.state('tool', {
abstract: true,
module: 'private'
})
.state('tool.suggestions', {
url: '/suggestions',
module: 'private'
});
$stateChangeStart
事件使您可以訪問toState
和fromState
對象。 這些狀態對象將包含配置屬性。
檢查自定義模塊屬性的示例
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
if (toState.module === 'private' && !$cookies.Session) {
// If logged out and transitioning to a logged in page:
e.preventDefault();
$state.go('public.login');
} else if (toState.module === 'public' && $cookies.Session) {
// If logged in and transitioning to a logged out page:
e.preventDefault();
$state.go('tool.suggestions');
};
});
我沒有更改Cookie的邏輯,因為我認為這超出了您的問題。
您可以創建一個幫助器,以使它更加模塊化。
publicStates
myApp.value('publicStates', function(){
return {
module: 'public',
routes: [{
name: 'login',
config: {
url: '/login'
}
}]
};
});
privateStates
myApp.value('privateStates', function(){
return {
module: 'private',
routes: [{
name: 'suggestions',
config: {
url: '/suggestions'
}
}]
};
});
幫手
myApp.provider('stateshelperConfig', function () {
this.config = {
// These are the properties we need to set
// $stateProvider: undefined
process: function (stateConfigs){
var module = stateConfigs.module;
$stateProvider = this.$stateProvider;
$stateProvider.state(module, {
abstract: true,
module: module
});
angular.forEach(stateConfigs, function (route){
route.config.module = module;
$stateProvider.state(module + route.name, route.config);
});
}
};
this.$get = function () {
return {
config: this.config
};
};
});
現在,您可以使用助手將狀態配置添加到您的狀態配置中。
myApp.config(['$stateProvider', '$urlRouterProvider',
'stateshelperConfigProvider', 'publicStates', 'privateStates',
function ($stateProvider, $urlRouterProvider, helper, publicStates, privateStates) {
helper.config.$stateProvider = $stateProvider;
helper.process(publicStates);
helper.process(privateStates);
}]);
這樣,您可以抽象出重復的代碼,並提出一個更具模塊化的解決方案。
注意:以上代碼未經測試
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.