AngularJS detect when $compile HTML string is done

Question

I'm using $compile to compile a directive on the fly. What I would like to know is if there is a way to detect when the directive is done compiling (promise?) so that I can append it to the DOM. I want to do something like this:

function newMessage() {
    var directive = $compile("<div select-contacts message=\"newShare\"></div>");

    // Compile directive
    directive($scope).then(function(compiled) {
        // After compiling, append it somewhere in the DOM
        angular.element('#new_message').html(compiled);
    });
}

I've searched the documentation of $compile and I'm still not clear on how to do something like this, or if it's even possible.

Update

Here is what I have currently. This works on localhost with the timeout set to 0, however on production it only works when I introduce a delay greater than 50ms. I have 250ms to be safe, but that seems arbitrary.

function newMessage() {
    angular.element('#new_message_container').html($compile("<div select-contacts message=\"newShare\"></div>")($scope));
    $timeout(function() {
        angular.element('#new_message').html(compiled);
            content: angular.element('#new_message'),
            elem: angular.element('#new_message_container'),
            width: '1024px',
            height: '480px'
        });
    });
}

Basically I have a container element that is hidden. I compile the directive and place it inside the hidden container. Then within a timeout block, I open a modal, which moves the root directive element from the hidden container to the modal element. When I run this on localhost it works. The modal opens and the directive is already compiled. On production, the directive appears not to be finished compiling before the code in the timeout block is called. The effect being that the modal opens but is empty.

"Then within a timeout block, I open a modal, which moves the root directive element from the hidden container to the modal element" so basically you have another "event" to wait ? if that so, you could use two $timeout calls, or use a directive — illeb
– illeb, Commented Aug 23, 2016 at 5:31

illeb · Accepted Answer · 2016-08-22 22:21:52Z

0

To wait for the compile to finish and to be applied to the dom, a $timeout at 0 should suffice for all your needs:

function newMessage() {
    var directive = $compile("<div select-contacts message=\"newShare\"></div>");

   // Compile directive
   $timeout(function(){
       angular.element('#new_message').html(compiled);
   }, 0);
}

Timeout at 0 executes your inner function at the next angular digest cycle: in other words, immediately after bindings are executed (and hence all dom elements are compiled and injected in the dom).

answered Aug 22, 2016 at 22:21

illeb

2,9471 gold badge23 silver badges35 bronze badges

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

1 Comment

Daniel Bonnell Over a year ago

I just updated my question with some additional details. I tried your solution and it works on localhost but not on production for some reason.

Collectives™ on Stack Overflow

AngularJS detect when $compile HTML string is done

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related