在使用UI角路由器与$ stateChangeStart toState和fromState $状态的方法 [英] Using $state methods with $stateChangeStart toState and fromState in Angular ui-router
问题描述
我正在写一个处理程序$ stateChangeStart:
I'm writing a handler for $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不具有包括方法。我应该做不同的东西,或者是有没有办法做我想要做什么?
toState does not have the includes method. Should I be doing something different, or is there a way to do what I'm trying to do?
此外,一些//登录的东西时,包括$ state.go(...),我得到一个无限循环。什么可能会导致?
Also, when //some login stuff includes a $state.go(...), I get an infinite loop. What might cause that?
下面是一个更完整的例子来展示我们最终得到了工作:
Here's a more complete example demonstrating what we eventually got to work:
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不可能是$状态服务,或者为什么$状态服务不能接受它的方法的状态配置覆盖。
I don't like using indexOf to search for a particular state in the toState. It feels naive. I'm not sure why toState and fromState couldn't be an instance of the $state service, or why the $state service couldn't accept a state configuration override in its methods.
无限循环是由我们犯的一个错误引起的。我不喜欢这个,所以我还在寻找更好的答案。
The infinite looping was caused by a mistake on our part. I don't love this, so I'm still looking for better answers.
推荐答案
当您添加一个对象 $ stateProvider.state
的对象,然后与国家通过。所以,你可以添加你可以在需要时对后来读的附加属性。
Suggestion 1
When you add an object to $stateProvider.state
that object is then passed with the state. So you can add additional properties which you can read later on when needed.
示例路由配置
$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
的对象。这些状态对象将包含配置属性。
The $stateChangeStart
event gives you acces to the toState
and fromState
objects. These state objects will contain the configuration properties.
示例检查自定义模块属性
$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');
};
});
,因为我认为这是超出范围你的问题我并没有改变饼干的逻辑。
I didn't change the logic of the cookies because I think that is out of scope for your question.
您可以创建一个助手,让你这个工作更加模块化。
You can create a Helper to get you this to work more modular.
值 publicStates
Value publicStates
myApp.value('publicStates', function(){
return {
module: 'public',
routes: [{
name: 'login',
config: {
url: '/login'
}
}]
};
});
值 privateStates
Value 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
};
};
});
现在你可以使用助手的状态配置添加到您的状态配置。
Now you can use the helper to add the state configuration to your state configuration.
myApp.config(['$stateProvider', '$urlRouterProvider',
'stateshelperConfigProvider', 'publicStates', 'privateStates',
function ($stateProvider, $urlRouterProvider, helper, publicStates, privateStates) {
helper.config.$stateProvider = $stateProvider;
helper.process(publicStates);
helper.process(privateStates);
}]);
这种方式可以抽象出重复code,并与更多的模块化解决方案上来。
This way you can abstract the repeated code, and come up with a more modular solution.
注:上面的code未测试
Note: the code above isn't tested
这篇关于在使用UI角路由器与$ stateChangeStart toState和fromState $状态的方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!