angular ui-router:在解析中获取toState的$ state状态信息

时间:2014-04-10 10:53:41

标签: javascript angularjs angular-ui angular-ui-router

更新:从1.0.0alpha0起,这应该可以在angular-ui-router中实现。请参阅发布说明https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0和我创建的问题https://github.com/angular-ui/ui-router/issues/1018

我想在处理解析时使用角度ui-router访问应用程序导航到的状态名称和其他属性。

原因:我想在允许应用程序输入该页面之前异步加载一些用户数据(包括其访问权限)。

目前这是不可能的,因为将$ state注入解决点指向您正在导航的状态,而不是您导航到的状态。

我知道我可以:

  • 使用$ rootScope(' $ stateChangeStart')在其他地方获取toState,并将其保存在我的设置服务中。但我觉得它有点乱。
  • 将状态硬编码到决心,但我不想重复使用我的所有页面的决心

我还在ui-router github上创建了一个问题(如果你有兴趣,请+ 1): https://github.com/angular-ui/ui-router/issues/1018

到目前为止,这是我的代码。任何帮助表示赞赏!

.config(function($stateProvider) {

    $stateProvider.state('somePage', {
        // ..
        resolve: {
            userData: function($stateParams, $state, Settings) {
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) {
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you're navigating away from
                    });
            }
        }
    });
});

4 个答案:

答案 0 :(得分:56)

Ui-Router 1.x的更新

$provide.decorator('$state', ($delegate, $transitions) => {
    $transitions.onStart({}, (trans) => {
      $delegate.toParams = trans.params()
      $delegate.next = trans.to().name
    })
    return $delegate
  })

Ui-Router 0.x

您随时可以使用$statenext属性装饰toParams

angular.config(function($provide) {
  $provide.decorator('$state', function($delegate, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, state, params) {
      $delegate.next = state;
      $delegate.toParams = params;
    });
    return $delegate;
  });
});

并按原样使用:

.state('myState', {
    url: '/something/{id}',
    resolve: {
        oneThing: function($state) {
            console.log($state.toParams, $state.next);
        }
    }
});

答案 1 :(得分:31)

所以我自己也找到了答案。如果您的代码行为与我的相似,则会正确注入$ stateParams对象,但$ state是一个空(或旧)状态对象。

对我有用的是在解析函数中引用this

.state('myState', {
    url: '/something/{id}',
    templateUrl: '/myTemplate.html',
    controller: function() {},
    resolve: {
        oneThing: function($stateParams) {
            console.log($stateParams); // comes through fine
            var state = this;
            console.log(state); // will give you a "raw" state object
        }
    }
})

第一个日志将返回您期望的内容。第二个日志将返回“原始”(缺少更好的术语)状态对象。因此,例如,要获取州名称,您可以访问this.self.name

我意识到这不是首选...如果$state(或其他标准化对象)可以为我们提供此信息,那将会更好。但这是我能找到的最好的。

希望有帮助...

答案 2 :(得分:1)

this.toString()将为您提供州名

答案 3 :(得分:0)

有人问过here

它们似乎内置在1.0.0-rc.2 $state$中,您可以将其插入resolve函数并获取此信息。

resolve: {
  oneThing: function($state$) {
    console.log($state$);
  }
}