Question

I have an ajax function in an angular service that checks a user’s credentials against a backend service. I’ve simplified the call quite a bit. The promise API works correctly when I use the $http service to issue the AJAX request:

function isOnline(){
    return $http.get(constants.dataUrl)
           .success(function(){return})
           .error(function(){return;});
}
function checkCredentials(){
    var online = isOnline();
    var checkCreds = online.then(function(){
        alert("Get succeeded");
    },
    function(response){
        alert("Get did not succeed");
    });
    return checkCreds;
}  

I see the functions defined in then called. When I use the jQuery ajax method though, the resolve and defer methods don’t seem to propagate and fire off the right methods in the online.then. The code below does not work:

function isOnline(){
    var defer = $q.defer();

    $.ajax({
      url: constants.dataUrl,
      dataType: 'json',
      beforeSend: function (xhr) {
        xhr.setRequestHeader('Authorization', basicAuthenticationToken());
      },
      error: function (xhr, ajaxOptions, thrownError) {
        alert("I am not online");
        defer.reject("I am not online");
      },
      success: function (data) {
        alert("I am online");
        defer.resolve(data);
      }
    });

    return defer.promise;
}
function checkCredentials(){
    var online = isOnline();
    var checkCreds = online.then(function(){
        alert("Get succeeded");
    },
    function(response){
        alert("Get did not succeed");
    });
    return checkCreds;
} 

Can I not use the promise API with the normal jQuery ajax methods? The reason I’d like to replace these calls has to do with a complicated PhoneGap scenario that doesn’t seem to work with Angular $http.

Answer 1

Angularjs needs to be notified of the changes that have happened outside of it. Since the ajax event is being handled by jquery you need to do an apply. Depending on where your function is (might be $scope or $rootScope)

defer.reject("I am not online");
$scope.$apply();

....
defer.resolve(data);
$scope.$apply();

This will let angular know to reprocess itself. Here are the docs on it: http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply

You would use this feature anytime you have to write javascript outside of angular, but need it to wire up into it.