$http doesn't work in asynchronous method - AngularJS and PhoneGap

Question

I try to make an application with PhoneGap and AngularJS that can be used online and offline (for Android device).
I want to get a list of people from the local database if the device is offline, and from a web service, using $http, if the device is online. But when the device is online, it doesn't work, web service isn't called.

I think the problem is PhoneGap asynchronous method. Indeed, in offline mode, it works but i need to use $scope.$apply to update my view. But that doesn't work for $http...

Does someone know how to use $http in asynchronous method?

function ListCtrl ($scope, $http){
    $scope.list = [];
    $scope.Id = 2;

    $scope.init = function(){
        document.addEventListener("deviceready", getList, false);
    }

    $scope.getAll = function(){ 

        $http({
            url: 'http://10.0.0.2:63414/myWebMethod/' + $scope.Id,
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
           }
        }).success(function(data) {
            $scope.list = data; 
        });
    }

    function getList(){
        var db = window.openDatabase("Database", "1.0", "list", 200000);
        var network = navigator.connection.type;
        if (network == "none"){
            // local database transaction works fine
        } else {
            $scope.getAll();
        }
        $scope.$apply();
    }

    $scope.init();
}

Had a similar problem today - $http.post wouldn't work properly in a separate thread (in my code it was in a FileReader event handler). I'm guessing $http has to be called from the main UI thread for some reason. — Anders Bornholm
– Anders Bornholm, Commented Apr 19, 2013 at 17:34

Bertrand · Accepted Answer · 2013-04-19 18:32:09Z

1

In the success callback you also have to trigger the digest with $scope.$apply();

$http({
        url: 'http://10.0.0.2:63414/myWebMethod/' + $scope.Id,
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
       }
    }).success(function(data) {
        $scope.list = data; 
        $scope.$apply();
    });

$http requests are asynchronous, so before you get any response from your request the program will keep executing and $scope.$apply() that you put after the if (network == "none") statement will run for nothing (you can remove it).

The PhoneGap query is working because you are using $scope.$apply() in it's callback, and you have to do the same in the $http success callback.

edited Apr 19, 2013 at 18:32

answered Apr 19, 2013 at 18:21

Bertrand

13.6k5 gold badges41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

axvo Over a year ago

Indeed, that was the problem. i don't know why i didn't try this. Thank you very much for your answer.

Collectives™ on Stack Overflow

$http doesn't work in asynchronous method - AngularJS and PhoneGap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related