$animate.enter callback firing before element is fully inserted

[Foxandxss]

Hello, I have this weird issue in Foxandxss/angular-toastr#109. Not sure if the problem is mine or from angular.

I have this directive:

.directive('foo', function() {
  return {
    templateUrl: 'template.html',
    link: function(scope) {
      scope.init = function() {
        console.log('here');
      };
    }
  };
})

And I build it by hand in a service, something along this lines:

var fooObj = {};    
fooObj.scope = $scope.$new();    
fooObj.el = $compile('<foo></foo>')(fooObj.scope);

Then I insert it in the dom like:

var body = $document.find('body').eq(0);

$animate.enter(fooObj.el, body).then(function() {
  fooObj.scope.init();
});

I would expect the callback function on $animate.enter to fire once the directive is fully inserted on the body and initialized. Since it has to fetch the template.html remotely, the callback will fire before the link function is even called, so I get a fooObj.scope.init is not a function (normal, it isn't set yet).

If you call it a second time (template is now cached), it works as expect, the callback function will be called once the link function is called so you can see the "here" on the console.

If I cache my template on the first place, it works.

Check the plunker: http://plnkr.co/edit/VMsKm5ATEC7rGKQz0gBY

Remove the comments to see it working without problems.

Thoughts?

[lgalfaso]

$animate.enter promise is resolved once the element is inserted, not once all the directives inside. Now, compilation of directives with templateUrl is an asynchronous process, the fact that if you cache the template then the promise that resolves the asynchronous compilation is handled before the $animate.enter promise, is just by chance and not something you should be relied on.

Unfortunately there is no way to know when the compilation finishes :(