Delay directive from rendering until promise is resolved in controller

[arush]

In my controller I call a service that returns a promise. It is fetching external data. A directive in my view relies on this data. When I load the page, the directive renders immediately with undefined parameters. How can I delay the view from rendering the directive until the promise is resolved?

I tried putting a 'resolve' in the route, but I am using a service to get the promise, so i can't use the below:

My data is retrieved via promise in my controller like this:

var promise = DataService.getThing();

so I tried doing that using the example below, but the route would just never change, as if the promise is never resolved.

PhoneListCtrl.resolve = {
  phones: function($q, DataService) {
    var deferred = $q.defer();

    deferred.resolve = DataService.getThing() // getThing returns a promise!

    return deferred.promise;
 }}

[Nikhilchandra Rathod]

Hello,

I think it will help to you..

http://plnkr.co/edit/VEt651cIseNPuTDFv6s6

Thanks

[Arush Sehgal]

Thanks for setting up the plunker,

However, I need to know how to use 'resolve' in this scenario, since the DataService returns a promise, I cannot wrap a promise in a promise inside a resolve object.

------------------------
Arush Sehgal
CTO, BRANDiD

mobile: +44 7917 138 230
twitter: @arush

skype: arushsehgal

blog: founders.getbrandid.com

------------------------

BRANDiD is a Seedcamp company

------------------------

Follow us on AngelList: angel.co/brandid

The information contained in this email is intended for the named recipient (s) only. It may also be privileged & confidential. If you are not an intended recipient, you must not copy, distribute or take any action in reliance upon it. No warranties or assurances are made in relation to the safety & content of this email & any attachments, no liability is accepted for any consequences arising from it. Please ensure you activate an up to date virus checker prior to opening any attachments.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Peter Bacon Darwin]

Hi Arush

Why can you not simply return the promise you get from the service in your resolve fn?

If you have a promise you don't need to wrap it with another deferred promise you just chain then functions onto the promise which themselves return promises.

(By the way, you don't attach resolve objects to the controller, you attach them to the route definition).

$routeProvider.when('xyz', {

  resolve: {

    thingy: ['dataService', function(dataService) {

      return dataService.getThingy();

      // or

      return dataService.getThingy().then(function(thingy) {

        return makeChangesTo(thingy);

      });

    }]

  }

});

--

[Arush Sehgal]

Thanks Peter this is what I needed!

--

[Cameron Roe]

Hello, I have a similar issue. But my question is about the case where I may have multiple directives on the page that need to pull in different data sources? How would I separate the resolve for each instance based on my directive definitions. Can I configure an attribute for example that speaks to an api and resolves before the template is rendered?