CODEWITHSUNDEEP
jqueryangularjsjquery-ui
perrohunter
perrohunter

Reputation: 3536

Angular $document append not working when start call is from jQuery

I got some code that I got from this article and it works nicely when called from an ng-click directive but doesn't when the initial call comes from jQuery, I'm trying to show the modal popup after a draggable is dropped.

var popupTemplate = document.createElement("div");
popupTemplate.setAttribute("ng-include", "'myTemplate.html'");
var popupScope = $rootScope.$new();
popupScope.bucket = bckt;
var popupLinker = $compile(popupTemplate);
var popupElement = popupLinker(popupScope);
$document.find('body').append(popupElement);

First scenario where the code is working perfectly, I have a function in a Service that displays the modal popup when the user does ng-click on an element inside an ng-repeat. This works, just fine. the way I show the pop up is using $document.find('body').append(popupElement);

ng-repeat -> ng-click -> function in scope -> call to service -> create pop-up from template and append to body √

However when I try to perform the same action from jQuery the append doesn’t happen, I debugged everything to the point where I’m sure that popupElement has the new element to inject and everything is ready by $document.find('body').append(popupElement); doesn’t work, the popupElement doesn’t get appended to body

jQuery event -> callback to Angular through angular.element(‘#controller').scope().someFunction() -> call to Service -> create pop-up from template and append to body X

Do you have any idea on why this later append call could not be working?

Thank in advance for any advice

Upvotes: 0

Views: 1559

Answers (1)

perrohunter
perrohunter

Reputation: 3536

I found the solution to my problem, I was making DOM modifications but they were not being shown until the DOM was rendered by angular, to kick in the DOM Render I just had to call 

$rootScope.$apply();

That is the reason why when I started the login from jQuery the element was not showing, because there was no natural cycle of angular, therefore the $apply cycle was not kicking in on it's own.

Upvotes: 1

Related Questions