Angularjs-ui-router:resolve in parent does not fire from children

Question

In my angularjs app ,i have angular-ui-bootstrap tabs and on selection of tabs i change to different state using $state.go and with state transistion url on browser changes.

I have parent static tab pointing to $state:home.summary and dynamic tabs point to $state:home.summary.detail. When i go from parent to child, child resolve method is fired but when i move from child to parent,parent resolve doesn't fire

State changes,url changes but parent resolve is not fired and stays where it is.

Routes.js

 .state('home', {
          abstract: true,            
          url: '/home',
          templateUrl: 'scripts/home.html'
   })
.state('home.summary', {
url: '/summary', 
controller: 'SummaryCtrl',                
views: {               
       'summary': 
          {
                    templateUrl: "scripts/home/summary.html",
                    resolve: {
                     load: function ($rootScope,$stateParams,ServiceA) {
                        ServiceA.get().$promise;
                     }
                    }
          }
       }
})
.state('home.summary.detail', {
url: '/detail/:id',
controller:'DetailCtrl',                 
views: {               
       'detail': 
          {
                   templateUrl: "scripts/home/detail.html",
                   resolve: {
                     load: function ($rootScope,$stateParams,ServiceB,$timeout) {
                       var promise=ServiceB.retrieve(id);
                       return promise;
                     }
                    }
          }
       }
}) 

Tabs.html

  <div ng-controller="TabsCtrl">
  <ul tabset>
  <li tab select="selectStaticTab()">
   <span tab-heading>Search<a style="left:9px" class="glyphicon glyphicon-search"></a>         </span>       
         <div class="well">  
             <div ui-view="summary"></div>    
         </div> 
   </li>
    <li tab ng-repeat="tab in tabs track by tab.id"  active="tab.active"     select="tab.select()"> 
     <span tab-heading>{{tab.title}}</span>
         <div ui-view="detail"></div>
   </li>
  </ul>   
  </div>

why parent resolve is not fired from child state??? Any help will be appreciated.

Thank you

Answer 1

There are many issues with your draft, I tried to make them all working here

1) Firstly, we are using the ui-router so we cannot use the <div ng-controller="TabsCtrl">. We do have states now, and each state can have more views, which DO have their own controllrs (i.e. controller belongs to view beeing part of a state)

2) As just explained, views do have controller (exactly one). Not states - they do NOT have controllers. So I moved the controller definition from state, into view...

    .state('home.summary', {
      url: '/summary',
      // NOT HERE
      views: {
        'summary': {
          ...
          controller: 'SummaryCtrl',
        }
      }
    })
    .state('home.summary.detail', {
      url: '/detail/:id',
      // NOT HERE
      views: {
        'detail@home': {
          ...
          controller: 'DetailCtrl',

3) resolve of the parent and child should have different names. I changed the child resolve like this (see mainyl the name load2 instead of load):

    .state('home.summary.detail', {
      url: '/detail/:id',          
      views: {
        'detail@home': {
          ...
          resolve: {
            load2: function($rootScope, $stateParams) {
              return 'loaded child with param ' + $stateParams.id ;
            }
          },
        }

4) Even if we want to have that: ui-view cannot be inside of the repeater. Well it can, but it would simply mean that the state view would be placed there as many times as repeated (but see the links below .. how to do that)

I moved thes ui-view outside of the repeater:

<li tab 
  ng-repeat="tab in tabs track by tab.id" active="tab.active" select="tab.select()">
  <span tab-heading>{{tab.title}}</span>
</li>
<hr />
<div ui-view="detail"></div> // moved outside of repeater

5) if we target the view, which is not placed directly in its parent, we have to use absolute naming, that's why I used this:

    .state('home.summary', {
      url: '/summary',          
      views: {
        'summary': { // ok name, while direct parent is home
         ....
        }
      }
    })
    .state('home.summary.detail', {
      url: '/detail/:id',          
      views: {
        'detail@home': { // we have to add @home to say that the target  
          ....           // is in a home state not in our parent
        }
      }

Check the complete working solution here

Few very interseting reading (I'd say):

• how to use ui-router to change detail info inside of the repeater
• how the absolute view naming works revealed