nested directives and async data in angular

Question

I've almost all my code split up in directives. This is great because the directives get very short, specific and clear about what they intend to do.

E.g. my address form is a separate directive that I nest wherever needed, e.g. the user profile form.

<form name="userform">
    ...some inputs...
    <my-address-form my-address="user.address">
</form>

The problem is, that the address has country options, that are fetched from the server. In the case of the user this leads to two possible scenarios: I bind the address inputs directly to the '=' scope property

<div ng-form="addressform">
    <my-dropdown name="country" ng-model="myAddress.country" my-options="asyncCountries">
</div>

What then happens is that the directive gets rendered before the countries are loaded, and the dropdown is not set.

The second option is to use a separate address object in the address directive, wait for the options to to be loaded and then pass the data along. But then changes from outside of the address directive wont get reflected.

The solution to put resolve objects on my route configuration doesn't help neither, because the resolved data can't be injected into the directives (they only get injected into the controller defined in the route).

any suggestions?

Deblaton Jean-Philippe · Accepted Answer · 2015-03-09 13:34:49Z

1

When I see : my-options="asyncCountries", I assume that you have declared your scope binding inside your directive that way: scope:{myOptions: '='}

The object you pass into my-options can also be a promise, or not. If you are using $q inside your application, what you can do inside your directive is the following :

$q.when($scope.myOptions).then(function(data){
    //begin to build your options here.
});

$q.when() can either receive a promise, or an object. If it is a promise, data will be the object returned by your promise. If it is an object, data will be this object.

answered Mar 9, 2015 at 13:34

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

nested directives and async data in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest