CODEWITHSUNDEEP
angularjsangular-ui-routerangular-uiangular-promise
TkNeo
TkNeo

Reputation: 523

UI router nested view not resolving

I am using UI Router Multiple Views concept.

The documentation says that i can have resolve on individual views. As you can see in my plunker, I have a resolve on my child view. The resolve returns a promise, which in my case, is resolved in the parent controller. I have simulated my problem with a setTimeOut. Basically, after 5 seconds, the child view should load (with an alert saying "In Child State") but it doesn't !!!

Relevant code is below but please instead refer to Plunker.

'child@parent': {
    template: '<h4>This is Child State</h4>',
    controller: childCtrl,
    resolve: {
        trd: function(tradeFactory) {
            console.log('in resolve of child');
            return tradeFactory.ready();
        }
    }
 }

Upvotes: 1

Views: 566

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

(Check updated and working plunker) The point here is:

all resolve must be already resolved, before the views (with its controllers) are rendered

And that is not true in your scenario. In fact, there is a race condition, ending up in the deadlock.

  1. one view is waiting for a resolve (is provided with a promise)
  2. other view's controller is ready to trigger resolve (make a promise resolved), but... it cannot be triggered, while waiting for its sibling

The original snippet

views: {

  '': {
    ...
    // inside of this, you expect to resolve the below promise
    controller: parentCtrl
  },


  'child@parent': {
      ...
      resolve: {
          trd: function(tradeFactory) {
              // this is a promise waiting for resolve
              // implemented in parent controller ... deadlock
              return tradeFactory.ready();
          }
      }
  }

So, the above is not working. We have to do all inside of the resolve, e.g. this way:

views: {

  '': {
    ...
    controller: parentCtrl,
    // here do the resolve
    resolve: {
      parentReady: function(tradeFactory){
        setTimeout(function(){ 
          tradeFactory.ResolveReady()
        }, 1500); 
      }
    }
  },


  'child@parent': {
      ...
      resolve: {
          trd: function(tradeFactory) {
              console.log('in resolve of child');
              return tradeFactory.ready();
          }
      }
  }

There is updated plunker

Upvotes: 1

Related Questions