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.
