Angular UI-Router:$ state.current有时是未定义的

Question

我正在使用ui.router我的角度应用程序,并在我的导航栏controller(包含在多个模板中)中,我编写了一个简单console.log($state.current)的测试它的行为.

我注意到,有时,在重新加载时,状态是未定义的:

Object {name: "", url: "^", views: null, abstract: true}

有时它被定义:

Object {url: "/admin", templateUrl: "app/components/admin-dashboard/admin-dashboard.html", controller: "AdminCtrl", controllerAs: "vm", name: "admin-dashboard"}

可能是这种行为的原因是什么？如何保证在加载视图时定义我的状态？

Answer 1

获得正确价值的最直接方法$state.current是等待$stateChangeSuccessui-router发起事件.这是你如何做到的:

在Navbar控制器中:

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ 
    event.preventDefault(); 
    console.log($state.current)  // this should now always have a resolved value
})

有关更多详细信息,请参阅ui-router wiki.

为什么这个工程作为对仅做console.log($state.current)是因为,$ state.current具有正确的值只有"后"的路线是完全加载.当你在没有事件的情况下编写它时,根据你写它的位置,它可能是命中或错过.这就是你得到不一致结果的原因.正是由于这个原因,ui-router提供了一个成功事件,它承诺该路由已经得到了解决.