AngularJS function not aware of new dom element after $compile

Question

I have a directive which at the end of everything else it does, appends a new dom element that was created in memory to the body using the $compile method in this way

app.directive('transitionBackground', function ($compile) {
   return {
       restrict: 'E',
       link: function(scope, elem, attrs) {

           ...lots of code...
            function compile () {
                $compile(_stageElement)(scope).appendTo("body");
                animate();                
            }
    function animate() {
        console.log($(".newElement"));
    }

}

When the log function happens, the new element selector returns an empty array, however when I use the console in my browser to log the same selector I get the new element as expected. When I take the compile piece off I cannot even do that, so I know the compile method is working. Why can't the animate function see it?

Looks like $compile might be asynchronous. Can you put `animate()` in a $timeout callback? — Josh Beam, May 23 '14 at 18:49

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

The element is probably not rendered yet, which is why you can access it from the debug console (long, long after the animate function runs).

Have a look at the answer of this question: AngularJS: How can I run a directive after the dom has finished rendering?, I'm guessing that will solve your issue.

edited May 23 '17 at 11:50

Community

1
1

answered May 23 '14 at 18:47

fredrikhl

159
4

Ha! Worked like a charm. That's strange to me, I was of the impression that the browser was always synchronous. Go figure. – richbai90 May 23 '14 at 18:53

AngularJS function not aware of new dom element after $compile

1 Answers1