Question

这是一段代码，用于在每次UI路由器状态更改之前检查用户权限。一切正常，除了当权利没问题时，转换到新状态（使用$ state.go，如下所示，或使用$ state.transitionTo），似乎根本不做任何事情（控制台消息）已记录，但全部都是。）

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 );
                    }
                });
            }
        }
    );
});

你知道为什么这不起作用吗？

修改

我注意到HMTL部分对应于我们正在转换的状态，通过GET请求正确获取，但它从未显示：旧的HTML保持显示（来自先前状态的那个），即使URL已正确更新......

编辑：添加路由器配置代码

在主模块文件中：

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

在每个子模块中：

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'
        })
});

Answer 1

我有类似的问题，这就是我解决它的方法：

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

正如在其他答案中提到的那样，$state.go在.run中不起作用。根据{{3}}的建议，我最终使用此解决方法

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

不确定这是否对您有所帮助，但您可以尝试一下。希望它有所帮助

Answer 2

我认为你的问题将通过这样做来解决：

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

.run( function($rootScope, $window, $state, AuthManager, $timeout)
{
    $rootScope.$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams)
        {
            if( ! S.isUserConnected() && toParams.requiresLogIn )
            {

                AuthManager.openConnectionPane().then( function( data )
                {
                    if( AuthManager.isUserConnected() ) {
                        console.log("This message is correctly printed!");
                         $timeout(function() {
                            event.preventDefault();
                            $state.go(toState.name);
                          });

                    }
                });
            }
        }
    );
});

$ state.go无法在.run中正常运行这应该是通过添加超时来解决方法

Answer 3

尝试将event.preventDefault();放在$state.go下方。

这是我看到这个建议的想法： angularjs app.run doesn't get called with state

基本上是这样的：

AuthManager.openConnectionPane().then( function( data ) { if( AuthManager.isUserConnected() ) { console.log("This message is correctly printed!"); $state.go( toState.name ); } }); event.preventDefault();

为什么$ state.transitionTo或$ state.go不显示新的HTML部分？

3 个答案: