angularjs – 角ui路由器,并从父级访问子状态参数

前端之家收集整理的这篇文章主要介绍了angularjs – 角ui路由器,并从父级访问子状态参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
编辑了更多的细节

新手问题在这里,我相信.我正在努力做一些我以为会很直接的事情,但是我没有到任何地方.

基本上,我有一个父母状态,有几个小孩国.我想加载一些在父状态的解析中的数据,以便它可用于所有的子状态.为此,我需要一个传递给子状态的参数(context)才能使用.我通过$state.params得到它.代码(有些为了清楚省略)就是这样的:

.state('pbr',{
    url: "/pbr",templateUrl: "pbr/pbr.html",controller: "pbrBaseCtrl",abstract: true,resolve: {
        dpts: function(NavDPT,$state) {
               return NavDPT.query({context: $state.params.context}).$promise;
              }
        }    

})
.state('pbr.review',{
        url: "/review/{context}?div",templateUrl: "pbr/pbr-review.html",controller: "pbrReviewCtrl"
    })

根据我的理解,$state.params应该包含父和子状态的传递参数,而$stateParams只对活动状态有参数.

无论如何,我看到的是,$state.params在解决之前没有被填充,因此数据的获取失败.尽管如此,它最终还是得到了人口的增长.在获取数据之前,似乎没有办法等待$state.params可用.我已经尝试在超时等待包装的东西

我尝试使用查询参数,并在父级别指定了查询参数,我观察到同样的行为 – 当解决方案发生时,newcontext尚不可用.

.state('pbr',{
            url: "/pbr?newcontext",resolve: {
                dptsResource: 'NavDPT',dpts: function(dptsResource,$state,$log) {
                    $log.info("state.params is also ",$state.params);
                    return dptsResource.query({context: $state.params.newcontext}).$promise;
                }
            }

        })

谢谢.

克里斯

an example显示了即使在resolve函数中我们可以访问$stateParams,但它们必须在当前或父级状态(而不是在子级)中定义,

所以,这些是状态:

$stateProvider
    .state('pbr',{
        // we define 2 params oldContext and newContext
        url: "/pbr/{oldContext}?newContext",...
        resolve: { 
            // here we can get all params defined for our state
            dpts: function($state,$stateParams) { 
                return {
                  oldContext : $stateParams.oldContext,newContext : $stateParams.newContext,}
            }
        }
    })
    // child will have even the context as 3rd param
    .state('pbr.review',{
      url: "/review/{context}",...
    })

这些是如何调用它们的方式:

// via ui-sref
ui-sref="pbr.review({oldContext: 'abc1',newContext : 'def1',context : 'xyz1'})"
ui-sref="pbr.review({oldContext: 'abc2',newContext : 'def2',context : 'xyz2'})"

// via href
href="#/pbr/abc1/review/xyz1?newContext=def1"
href="#/pbr/abc2/review/xyz2?newContext=def2"

观察更多在plunker

猜你在找的Angularjs相关文章