angularjs – 使用$state方法与$stateChangeStart toState和fromState在Angular ui-router

前端之家收集整理的这篇文章主要介绍了angularjs – 使用$state方法与$stateChangeStart toState和fromState在Angular ui-router前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在写一个处理程序$ stateChangeStart:
  1. var stateChangeStartHandler = function(e,toState,toParams,fromState,fromParams) {
  2. if (toState.includes('internal') && !$cookies.MySession) {
  3. e.preventDefault();
  4. // Some login stuff.
  5. }
  6. };
  7.  
  8. $rootScope.$on('$stateChangeStart',stateChangeStartHandler);

toState没有包含方法。我应该做不同的事情,还是有办法做我想做的事?

此外,当一些登录东西包括$ state.go(…),我得到一个无限循环。可能会导致什么?

这里有一个更完整的例子演示了我们最终要做什么:

  1. angular.module('test',['ui.router','ngCookies'])
  2. .config(['$stateProvider','$cookiesProvider',function($stateProvider,$cookiesProvider) {
  3.  
  4. $stateProvider
  5. .state('public',{
  6. abstract: true
  7. })
  8. .state('public.login',{
  9. url: '/login'
  10. })
  11. .state('tool',{
  12. abstract: true
  13. })
  14. .state('tool.suggestions',{
  15. url: '/suggestions'
  16. });
  17.  
  18. }])
  19. .run(['$state','$cookies','$rootScope',function($state,$cookies,$rootScope) {
  20. $rootScope.$on('$stateChangeStart',function(e,fromParams) {
  21.  
  22. if (toState.name.indexOf('tool') > -1 && !$cookies.Session) {
  23. // If logged out and transitioning to a logged in page:
  24. e.preventDefault();
  25. $state.go('public.login');
  26. } else if (toState.name.indexOf('public') > -1 && $cookies.Session) {
  27. // If logged in and transitioning to a logged out page:
  28. e.preventDefault();
  29. $state.go('tool.suggestions');
  30. };
  31. });
  32. });

我不喜欢使用indexOf在toState中搜索特定的状态。感觉天真。我不知道为什么toState和fromState不能是$状态服务的一个实例,或为什么$ state服务不能接受在其方法中的状态配置覆盖。

无限循环是由我们的错误引起的。我不喜欢这个,所以我仍然在寻找更好的答案。

建议1

当你添加一个对象到$ stateProvider.state那个对象然后传递状态。因此,您可以添加其他属性,稍后您可以在需要时阅读。

路由配置示例

  1. $stateProvider
  2. .state('public',{
  3. abstract: true,module: 'public'
  4. })
  5. .state('public.login',{
  6. url: '/login',module: 'public'
  7. })
  8. .state('tool',module: 'private'
  9. })
  10. .state('tool.suggestions',{
  11. url: '/suggestions',module: 'private'
  12. });

$ stateChangeStart事件允许您访问toState和fromState对象。这些状态对象将包含配置属性

示例检查自定义模块属性

  1. $rootScope.$on('$stateChangeStart',fromParams) {
  2. if (toState.module === 'private' && !$cookies.Session) {
  3. // If logged out and transitioning to a logged in page:
  4. e.preventDefault();
  5. $state.go('public.login');
  6. } else if (toState.module === 'public' && $cookies.Session) {
  7. // If logged in and transitioning to a logged out page:
  8. e.preventDefault();
  9. $state.go('tool.suggestions');
  10. };
  11. });

我没有改变cookie的逻辑,因为我认为这超出了你的问题的范围。

建议2

你可以创建一个帮助,让你这个工作更模块化。

值publicstates

  1. myApp.value('publicStates',function(){
  2. return {
  3. module: 'public',routes: [{
  4. name: 'login',config: {
  5. url: '/login'
  6. }
  7. }]
  8. };
  9. });

值privateStates

  1. myApp.value('privateStates',function(){
  2. return {
  3. module: 'private',routes: [{
  4. name: 'suggestions',config: {
  5. url: '/suggestions'
  6. }
  7. }]
  8. };
  9. });

帮助器

  1. myApp.provider('stateshelperConfig',function () {
  2. this.config = {
  3. // These are the properties we need to set
  4. // $stateProvider: undefined
  5. process: function (stateConfigs){
  6. var module = stateConfigs.module;
  7. $stateProvider = this.$stateProvider;
  8. $stateProvider.state(module,{
  9. abstract: true,module: module
  10. });
  11. angular.forEach(stateConfigs,function (route){
  12. route.config.module = module;
  13. $stateProvider.state(module + route.name,route.config);
  14. });
  15. }
  16. };
  17.  
  18. this.$get = function () {
  19. return {
  20. config: this.config
  21. };
  22. };
  23. });

现在,您可以使用助手将状态配置添加到状态配置。

  1. myApp.config(['$stateProvider','$urlRouterProvider','stateshelperConfigProvider','publicStates','privateStates',function ($stateProvider,$urlRouterProvider,helper,publicStates,privateStates) {
  2. helper.config.$stateProvider = $stateProvider;
  3. helper.process(publicStates);
  4. helper.process(privateStates);
  5. }]);

这样,你可以抽象重复的代码,并提出一个更模块化的解决方案。

注意:上面的代码没有测试

猜你在找的Angularjs相关文章