3
votes

So I have 2 directives, lets call them input and auto complete.

The auto complete directive loads a remote template using templateUrl and it includes an input. The auto complete should be able to be placed inside the input directive. Now the issue I am running into is that the input directive is being compiled and executing it's linking function before the auto complete is compiled. This is an issue because the input directive assumes that there is an input element available at the time of running the linking function and since the linking function is running before the auto complete directive is compiled and injects the DOM, the input directive is not finding the input element.

I have to believe that the order of compile, pre, and post linking functions is not maintained with loading templates remotely because of the async nature of it.

Here is a plunker not using any templates:

http://plnkr.co/edit/gEk3GjuASxrV1L6Kp6Dq?p=preview

The compile, pre, and post linking functions are in the order I expect. Then I try the same thing but I have the logCompile2 directive have a template property:

http://plnkr.co/edit/EOYgf5z82mesixcb1LXU?p=preview

Again, the compile, pre, and post linking functions are in the order I expect. Finally we have the logCompile2 directive with a templateUrl properly, loading the template remotely:

http://plnkr.co/edit/A55sw6YRCuhvWUi6zQ4Q?p=preview

Now things are not working as expected, the root parent directive is now going through all the steps before any of the steps are executed for the child directives. The only difference I can see between this version and the other 2 is that the template is loading remotely (and I assume in a async manner).

Is there anyway to make a parent directive wait for all child directives to compile and inject DOM before running the parent's linking function without having to inline the templates?

1
Here's a primer on timing of link and controller functions. bennadel.com/blog/… doesn't cover compile, though. A plunker, even if it only simulates the remote call, would be really helpful. I'd be surprised if this is 100% because of a delay in loading a template file - I often test my code in devmode on a remote server without using template inlining (makes livereload more responsive). - pfooti
@pfooti Added plunkers that should the issues. I agree I don't think it has to do with the delay anymore but I do think it has to do with the async nature of loading templates remotely. - ryanzec
Created an issue on github : github.com/angular/angular.js/issues/8877 - ryanzec
Yeah, that's definitely weird and not what I'd expect. Some kind of unexpected behavior with the async call to templateURL definitely makes sense. - pfooti

1 Answers

0
votes

Apparently this is functioning as intended (you can start from this comment and read down):

https://github.com/angular/angular.js/issues/8877#issuecomment-54129804