为什么$ state.transitionTo或$ state.go不显示新的HTML部分？ [英] Why does $state.transitionTo or $state.go does not display the new HTML partial?

问题描述

下面是注定的每个UI路由器的状态变化之前检查用户权限一张code的。一切工作正常，但事实上，当权利都OK，到新的状态过渡（无论是与state.go $，如下，或$ state.transitionTo），似乎并没有在所有做任何事情（控制台消息被记录，但仅此而已）。

  angular.module（'mymodule中'，[/ * *依赖关系/]）.RUN（函数（$ rootScope，$窗口，$状态，AuthManager）
{
    $ rootScope。在$（'$ stateChangeStart'，
        功能（事件，toState，toParams，fromState，fromParams）
        {
            如果（S.isUserConnected（）及！＆放大器; toParams.requiresLogIn）
            {
                。事件preventDefault（）;
                AuthManager.openConnectionPane（）。然后（功能（数据）
                {
                    如果（AuthManager.isUserConnected（））{
                        的console.log（这个消息是正确打印！）;
                        $ state.go（toState.name）;
                    }
                }）;
            }
        }
    ）;
}）;
 

你有任何想法，为什么不起作用？

编辑：

我已经注意到，HMTL部分coresponding我们正在过渡到状态，是通过GET请求正确牵强，但它从来没有显示：旧的HTML保持显示（从previous状态的），甚至如果URL正确更新...

编辑：添加路由器配置code

在主模块文件：

  // angular.module（'mymodule中'，[/ * *依赖关系/]）
的.config（$ urlRouterProvider）{
    $ urlRouterProvider.otherwise（'/家）;
}
 

和每个子模块：

  angular.module（'mymodule.submodule'，[/ * *依赖关系/]）的.config（函数（$ stateProvider）{
    $ stateProvider
        .STATE（'事件 - 概述'，{
            网址：'/事件'，
            templateUrl：应用程序/活动/活动-overview.html，
            控制器：'EventsOverviewCtrl
        }）
        .STATE（'事件的细节'，{
            网址：'/事件/ {事件ID：INT}
            templateUrl：应用程序/活动/活动-details.html'，
            控制器：'EventsDetailsCtrl
        }）
        .STATE（'事件创造'，{
            网址：'/事件/新，
            params：一个{
                requiresLogIn：真
            }
            templateUrl：应用程序/活动/活动-creation.html'，
            控制器：'EventsCreationCtrl
        }）
}）;
 

解决方案

我也有类似的问题，这是我如何解决它：

 如果（AuthManager.isUserConnected（））{
   // ...
   。事件preventDefault（）;
   $ state.go（toState.name，空，{通知：假}），然后（功能（状态）{
      $ rootScope $广播（'$ stateChangeSuccess，状态为空）。
   }）;
}
 

由于它在其他的答案中提到的， $ state.go 不propertly在 .RUN 工作。继这个线程我结束了此解决方法

  $ urlRouterProvider.otherwise（函数（$喷油器）{
   变量$状态= $ injector.get（'$状态'）;
   $ state.go（'/家）;
}）;
 

不知道这是否可以帮助你，但你可以试试。希望它能帮助

Here is a piece of code destined to check user rights before each UI-router state change. Everything works fine, except the fact that when rights are OK, the transition to the new state (either with $state.go, as below, or with $state.transitionTo), does not seem to do anything at all (the console message is logged but that's all).

angular.module('mymodule', [ /* dependancies */ ])

.run( function($rootScope, $window, $state, AuthManager)
{
    $rootScope.$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams)
        {
            if( ! S.isUserConnected() && toParams.requiresLogIn )
            {
                event.preventDefault();
                AuthManager.openConnectionPane().then( function( data )
                {
                    if( AuthManager.isUserConnected() ) {
                        console.log("This message is correctly printed!");
                        $state.go( toState.name );
                    }
                });
            }
        }
    );
});

Do you have any idea why this does not work?

EDIT:

I have noticed that the HMTL partial coresponding to the state we are transitioning to, is correctly fetched via a GET request, but it never shows: the old HTML stays displayed (the one from the previous state), even if the URL is correctly updated...

EDIT: add the router config code

In the main module file:

//angular.module('mymodule', [ /* dependancies */ ])
.config( $urlRouterProvider ) {
    $urlRouterProvider.otherwise('/home');
}

And in each submodule:

angular.module( 'mymodule.submodule', [ /* dependancies */ ])

.config(function($stateProvider) {
    $stateProvider
        .state('events-overview', {
            url:'/events',
            templateUrl: 'app/events/events-overview.html',
            controller: 'EventsOverviewCtrl'
        })
        .state('events-details', {
            url:'/events/{eventId:int}',
            templateUrl: 'app/events/events-details.html',
            controller: 'EventsDetailsCtrl'
        })
        .state('events-creation', {
            url:'/events/new',
            params: {
                requiresLogIn: true
            }
            templateUrl: 'app/events/events-creation.html',
            controller: 'EventsCreationCtrl'
        })
});

解决方案

I had a similar issue and this is how I solved it:

if( AuthManager.isUserConnected() ) {
   //...
   event.preventDefault();
   $state.go(toState.name, null, {notify: false}).then(function (state) {
      $rootScope.$broadcast('$stateChangeSuccess', state, null);
   });
}

As it's mentioned in other answers, $state.go doesn't work propertly in .run. Following the advises of this thread I ended up working with this workaround

$urlRouterProvider.otherwise(function ($injector) {
   var $state = $injector.get('$state');
   $state.go('/home');
});

Not sure if this could help you, but you could try it. Hope it helps

这篇关于为什么$ state.transitionTo或$ state.go不显示新的HTML部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！