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

Question

我这里遇到了一个棘手的情况。我的父状态和子状态都覆盖顶层的相同 ui View (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

我。问题的答案:

... child since its not nested ... Is there a way to get that metricdata property in the child?

基于

What Do Child States Inherit From Parent States?

Child states DO inherit the following from parent states:

• Resolved dependencies via resolve
• Custom data properties

Nothing else is inherited (no controllers, templates, url, etc).

结合

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

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

... Is there a way to get that metricdata property in the child without having to manually call the same ajax call again in the child..

我想说，也有答案。例如

• Angular UI Router Nested State resolve in child states
• How do I prevent reload on named view, when state changes? AngularJS UI-Router

.. move the shared views/resolvers to the least common denominator. ..

例如我们可以像这个问答中那样做:Controlling order of operations with services and controllers ，参见plunker :

特殊的祖 parent /根状态:

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

它被注入(inject)到我们的状态/ View 层次结构的顶部，任何子状态都会从中受益

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

查看更多详情here并在working example中看到它