nonplus / angular-ui-router-title

AngularJS module for updating browser title/history based on the current ui-router state.
122 stars 30 forks source link

Chained resolve $title not working #10

Closed ben-liang closed 7 years ago

ben-liang commented 7 years ago

Hi there, I'm having some issues getting the following pattern to work:

  .state('contact', {
    url: '/contact/:contactId',
    ...
    resolve: {
      // Single contact
      contact: ['Contacts', '$stateParams', function(Contacts, $stateParams) {
        // Use Contacts service to retrieve a contact
        return Contacts.get({ id: $stateParams.contactId });
      }],
      // Dynamic title showing the name of contact
      $title: ['contact', function(contact) {
        return contact.name;
      }]
    }
  })

I'm using ui-router 0.4.2, and it looks like this version doesn't support chained resolves. So in the example above, when $title evaluates the contact resolve, it gets an unresolved promise rather than a resolved one. As such, contact.name evaluates to null, etc.

I've searched around a bunch and I still can't figure out if this an issue with my version of ui-router, or an issue with this particular package. According to most things I've read, ui-router v0.x doesn't seem to support chaining resolves, so I'm not sure how this would ever work as expected. Is there an implied dependency on a different version of ui-router that's not documented, or am I just doing something horribly wrong?

Thanks!

ben-liang commented 7 years ago

Update: The following works in ui-router 0.x. You have to return the resource method's $promise to force resolution of the resolve:

  .state('contact', {
    url: '/contact/:contactId',
    ...
    resolve: {
      // Single contact.  Return $promise of get method to force pre-resolution
      contact: ['Contacts', '$stateParams', function(Contacts, $stateParams) {
        // Use Contacts service to retrieve a contact
        return Contacts.get({ id: $stateParams.contactId }).$promise; //HAVE TO RETURN $promise
      }],
      // Dynamic title showing the name of contact
      $title: ['contact', function(contact) {
        return contact.name;
      }]
    }
  })
nonplus commented 7 years ago

Thanks for the update.