Tuesday, September 23, 2014

Angular JS ajaxComplete

I recently came across a problem where our ajaxComplete function wasn't being executed from jQuery after we started using Angular.  As it turns out (it was a bit of a "duh" moment) the issue was that when using Angular we were no longer using the jQuery ajax calls.  So the jQuery ajaxComplete function was never fired because no jQuery ajax calls were ever made.

That set me on a path of trying to figure out how to mimic the ajaxComplete behavior with Angular and this is what I came up with.  I haven't fully tested it, but wanted to put it up here before I forget so I can have a better starting point next time this comes up.

After the application has been created, configure the $httpProvider to have an intercept:

angularApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q) {
        return {
            response: function (response) {
                return response;
            }
        };
    });
}
]);

This particular implementation won't do anything but act as a pass through, but it can be modified however necessary to meet your needs.