如何在ui-router中继承解析数据

Question

我这里有一个棘手的情况.我的父状态和子状态都覆盖了顶层的相同ui视图(index.html).所以当它从父级进入子状态时,范围会被破坏(我认为？)基本上父级有一个存储在MetricData属性中的解析,我似乎无法从子级访问它,因为它没有嵌套我假设.有没有办法在子节点中获取该metricdata属性,而无需在子节点中再次手动调用相同的ajax调用

父母国家

     .state("home.metric", {
      url: "/category/:categoryId/metric/:metricId/name/:metricName",
      views: {

        'main@': {

          templateUrl:
            function (stateParams){
              //move this to a util function later
              var tempName = unescape(stateParams.metricName);
              tempName = tempName.replace(/\s/g, "-");

              return '../partials/slides/' + tempName + '.html';
            },
          resolve: {
            MetricData: ['MetricService', '$stateParams', 
              function(MetricService,    $stateParams){
                var data = { categoryId : $stateParams.categoryId, metricId : $stateParams.metricId};
                return MetricService.getMetricDetails(data);
              }]
          },
          controllerProvider: 
            function ($stateParams) {
              var tempName = unescape($stateParams.metricName);
              tempName = tempName.replace(/\s+/g, '');

              return tempName + 'Ctrl';
            }
        }
      }

    })

孩子的状态

.state("home.metric.detail", {
      url: "/detailId/:detailId/detailName/:detailName",
      views: {

        'main@': {
          templateUrl:
            function ($stateParams){
              //move this to a util function later
              var tempName = unescape($stateParams.detailName);
              tempName = tempName.replace(/\s/g, "-");

              return '../partials/slides/' + tempName + '.html';
            },
          resolve: {
            DetailData: ['DetailService', '$stateParams',
              function(DetailService,      $stateParams){
                var data = { categoryId : $stateParams.categoryId, detailId : $stateParams.detailId};
                return DetailService.getDetails(data);
              }],
            // MetricData: ['MetricService', '$stateParams', 
            //   function(MetricService,    $stateParams){
            //     var data = { categoryId : $stateParams.categoryId, metricId : $stateParams.metricId};
            //     return MetricService.getMetricDetails(data);
            //   }]
          },
          controllerProvider: 
            function ($stateParams) {
              var tempName = unescape($stateParams.detailName);
              tempName = tempName.replace(/\s+/g, '');

              return tempName + 'Ctrl';
            }
        }

      }

    })

Answer 1

I.问题的答案:

... 孩子因为它没有嵌套 ...有没有办法在孩子中获得该metricdata属性？

是根据

儿童国家对父母国家的继承是什么？

子状态DO从父状态继承以下内容:

• 通过解析解决了依赖关系
• 自定义数据属性

没有其他东西被继承(没有控制器,模板,网址等).

与...相结合

仅按视图层次结构的范围继承

请记住,只有嵌套状态的视图时,范围属性才会继承状态链.范围属性的继承与状态的嵌套以及与视图(模板)的嵌套有关的所有内容都无关.

完全有可能您有嵌套状态,其模板在您站点内的各种非嵌套位置填充ui-views .在这种情况下,您不能指望在子状态视图中访问父状态视图的范围变量.

II. 虽然现在应该清楚,但我们仍然需要找到解决方法:

... 有没有办法在子节点中获取该metricdata属性,而无需在子节点中再次手动调用相同的ajax调用.

我想说,也有答案.例如

• Angular UI路由器嵌套状态在子状态中解析
• 当状态发生变化时,如何防止在命名视图上重新加载？AngularJS UI-Router

..将共享视图/解析器移动到最小公分母...

例如,我们可以像在此问答中一样:控制服务和控制器的操作顺序,请参阅plunker:

一个特殊的祖父/根状态:

$stateProvider
  .state('root', {
    abstract : true,
    // see controller def below
    controller : 'RootCtrl',
    // this is template, discussed below - very important
    template: '<div ui-view></div>',
    // resolve used only once, but for available for all child states
    resolve: {
      user: function (authService) {
          return authService.getUserDetails();
      }
    }
  }) 

将已解析的内容传递到$ scope(由每个子节点继承)

.controller('RootCtrl', function($scope,user){
  $scope.user = user;
})

这是在我们的州/视图层次结构中注入的,任何子状态都可以从中获益

// any previously root state will just use the above as a parent
.state('index', {
    url: '/',
    parent : 'root',

在这里查看更多详细信息,并在一个工作示例中查看