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

发布时间：2020-12-17 09:29:46 所属栏目：安全来源：网络整理

导读：我在这里有一个棘手的情况.我的父状态和子状态都在顶级(index.html)上覆盖了同样的ui视图.所以当它从父进入到孩子的状态时,范围会被破坏(我想？)基本上,父进程存在MetricData属性中的一个解决方案,我看起来不能访问该小组,因为它不嵌套我假设.有没有办法得到

我在这里有一个棘手的情况.我的父状态和子状态都在顶级(index.html)上覆盖了同样的ui视图.所以当它从父进入到孩子的状态时,范围会被破坏(我想？)基本上,父进程存在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,resolve: {
            DetailData: ['DetailService',function(DetailService,detailId : $stateParams.detailId};
                return DetailService.getDetails(data);
              }],// MetricData: ['MetricService',//   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';
            }
        }

      }

    })

一,问题的答案：

… 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. ..

例如.我们可以像在这个问答A：Controlling order of operations with services and controllers,见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();
      }
    }
  })

将解决的东西传递到$范围(由每个孩子继承)

.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',

查看更多细节here,并在working example查看

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!