RFE: listener for view update completion

[godmar]

$apply() triggers model changes and subsequently updates the view.

Unfortunately, $apply() may return before the view has been updated. This can happen, for instance, when the view update involves the (asynchronous) processing of templates, and probably for other reasons.

There is no way in AngularJS to listen for when the view update has completed. As such, it's impossible to know when the DOM reflects the view update. This is a problem if AngularJS is used in conjunction with other libraries - for instance, jQuery plug-in that perform decorations on the DOM.

I think the problem is of a general nature, even though in my particular case I noticed it because of . The use of $includeLoaded listeners does not address my use case, since the templates are recursive and I don't know which $includeLoaded call will be the last one.

[btford]

This is a problem if AngularJS is used in conjunction with other libraries - for instance, jQuery plug-in that perform decorations on the DOM.

You should wrap jQuery plugins in a directive so that they can live within Angular's digest cycle.

[godmar]

I'm sorry, sidestepping the issue does not address it.

jQuery plug-ins sometimes make complex transformation on the DOM that cannot be expressed in a directive (if I understand it correctly that a directive is a piece of custom markup/attributes that the directive handles.)

It may work for some, say a tooltip that jQuery's tooltip plugin processes. It certainly doesn't work for plugins that examine larger, related portions of the DOM, such as jQuery.checkTree.

Lastly, sidestepping the issue is also contrary to AngularJS's stated philosophy:

"AngularJS works great with other technologies. Add as much or as little of AngularJS to an existing page as you like. "

It would have to read: if you use any AngularJS, be prepared to rewrite all other frameworks you're using with it.

[btford]

if I understand it correctly that a directive is a piece of custom markup/attributes that the directive handles

It's a bit more complicated than that :) I recommend that you read some tutorials on writing directives:

• http://onehungrymind.com/angularjs-directives-basics/
• http://johnlindquist.com/2012/04/16/angularjs_directive_tutorial.html

I agree that some jQuery plugins may be hard to integrate, but those are usually the ones that do not have a clear separation of concerns. Those plugins are typically best rewritten anyway, as they are typically not performant nor maintainable in the long run.

It would have to read: if you use any AngularJS, be prepared to rewrite all other frameworks you're using with it.

You're being a bit too dramatic. Writing a directive to act as an adapter for some widget is not even close to rewriting an entire framework.

[godmar]

FWIW, I'm using frameworks like angular or jQuery plugin so I don't have fix them and improve their separation of concerns. So whatever the technical merits of your criticism of these plug-ins, it's not helping developers who are merely users of ng or jQuery.

jQuery and directives aside, I'm wondering why you're not addressing the underlying question - should Angular correspond with the embedding environment about when it is finished with updating the view?

[mhevery]

I'm wondering why you're not addressing the underlying question - should Angular correspond with the embedding environment about when it is finished with updating the view?

So that is a very complex question. The issue is that with data-binding there is no clear start/end to the update cycle, it is continues. I am sure that is not the answer you are looking for, but angular is not like other frameworks, and so it lives by different rules.

How would you imagine this would work? What kind of and when should you receive these notifications.

[godmar]

Keep a global count of update cycles. The count is incremented whenever a) a user input event handler fires or b) outside code calls $apply(), and possibly in other situations ($http, etc.). Keep an array whose members are lists of promises for each update cycle number.

Whenever an asynchronous activity is started during a cycle, add a promise to the list corresponding to the current update cycle. (If subsequent asynchronous activities are started later on, in a callback that was set in a cycle, make sure to add them to the list corresponding to the original activity since the global update cycle count may have increased.)

Return (from $apply) a promise that is resolved when all promises in the list of the update cycle started by $apply have been fulfilled.

Make sure you resolve promises even in error cases so that the composite promise is eventually fulfilled.

[roytruelove]

@godmar - I don't think that will work in every case - Angular can track asynchronous activity that it starts, but not that's started by users or by 3rd party libraries. For that reason I don't think it's possible for it to know with 100% certainty that DOM manipulation is completely done. Unfortunately.. it would have come in handy.

[godmar]

But that's ok. If a user needs that functionality, they can keep track of it themselves, and then delay the post-rendering actions until after both ng reports that the view update cycle has completed and their own asynchronous activities have completed.

[3emad]

in directives, what is the down side of using:

        restrict: 'A',
        link: function(scope, element, attrs, controller) {
              element.chosen().change();
              $timeout(function(){
                    element.trigger("liszt:updated");
              });
        }

knowing that chosen() is a jQuery plugin and this bindings should be written in another way.

I'm just curious about $timeout down side hence when I debugged through the console, it was called only once post link the element.

This could be helpful to @godmar.

[roytruelove]

This is a relatively elegant solution to this problem: http://stackoverflow.com/a/15946913/295797

[godmar]

@roytruelove: not really. This solution seems to watch for DOM modification events. You'd be getting multiple of those as Angular changes the DOM.

[lee-elenbaas]

What is the status of this issue? is there a way to know when an update is complete? an api to notify angular that i am starting my own dom update and to notify it when i have completed it?