angular with foreign (jQuery) promises

By on (tags: angular, javascript, jQuery, categories: web)

When using angular turns out that it’s not as straightforward when it comes to foreign libraries.

I needed to use jQuery $.post instead of angulars $http.post method (to reduce the friction between angular and asp.net mvc regarding request token validation) and I came across unexpected (though understandable once you get to the core problem) behavior. Here’s the angular version:

and the jquery code fragment:

Not much of a difference besides function names…. but turns out the template sees the changes in the original (angular) version, but not the jquery version. Why? well… behind the scenes, angular promises call a very important (as it turns out) function:

This – as the name suggests – applies the changes on the $scope object so that the template can see them.

To resolve my primary issues I had two options.

  1. call $scope.$apply() manually in the .always() callback
  2. wrap the jquery promise in an angular promise using $q.when($.post(…))

I chose the latter one – who knows what else the angular promises do or what they will do in the future.

Cheers