Calling Angular service from outside JS via .scope().call() hangs request

Question

I'm working on adding a Google+ signin button to my Angular app and most of it is working, except for the handling of the callback result. The callback from the G+ signin is an outside JS function called signinCallback with looks like so:

//Handling the Google+ Signin right here
function signinCallback(authResult) {
angular.element($("#btnGooglePlus")).scope().handleGoogleSignin(authResult);
}

The only way I could figure out how to pass the authResult back into the controller was to call a controller method via element.scope(). handleGoogleSignin is called fine, and inside that function there is a http.get service call that looks like:

User.getSocialKey(key).then(function(data) {
    console.log(data);
});

User is a service, and getSocialKey looks like:

getSocialKey: function(etag) {
    console.log("Hit the social key service with the etag: " + etag);
    return $http({
        url: '/api/user/social',
        method: 'post',
        data: {etag:etag}
    }).then(function(result) {
        console.log("Returning promise from social service");
        return result.data;
    });
},

The first log statement gets hit fine, then nothing. Request is never sent. Now, if I go and click something on the page that has an ng-model attribute (example, a checkbox), the request is then sent and received just fine. So my question: Why is my Angular service call being suspended until I click on something? Why isn't it going through right away?

I've tried replacing getSocialKey with working service calls, same thing. I believe the issue comes down to calling the function with angular.element($("#btnGooglePlus")).scope().handleGoogleSignin(authResult); but I'm not sure. Anyone seen this before?

zs2020 · Answer 1 · 2013-09-16T14:09:01.147

4

Sorry I can't test but I think you should call .$apply() since the action is triggered outside the AngularJS's scope.

function signinCallback(authResult) {
    angular.element($("#btnGooglePlus")).scope().handleGoogleSignin(authResult);
    angular.element($("#btnGooglePlus")).scope().$apply();
}

edited Sep 16 '13 at 14:09

answered Sep 15 '13 at 23:51

zs2020

53,766
29
154
219

This seems right; see also the comments on this question: http://stackoverflow.com/questions/18436385/using-angularjs-http-in-browser-console#comment27422351_18436385 – Michelle Tilley Sep 16 '13 at 00:02
Hmm, that's throwing a `Uncaught TypeError: Object # – tymeJV Sep 16 '13 at 02:15
Small mistake: it is `$apply()`, not `apply()`, but otherwise this should be the solution. – Nikos Paraskevopoulos Sep 16 '13 at 07:39
@sza -- Ill give this a try once I'm back home... few hours or so. Will update then. – tymeJV Sep 16 '13 at 17:54
Still no go, the `$digest` cycle still isn't started. I read about possibly wrapping this in a `$timeout` call, but shouldn't `$apply` take care of that? – tymeJV Sep 16 '13 at 22:31
@tymeJV Hmm...weird. :( – zs2020 Sep 16 '13 at 22:32
Yeah... so far, calling that `$digest` manually has taken care of it. Not the prettiest solution but ill take it for now. Either way, +1 for the effort and thanks for the help so far. – tymeJV Sep 16 '13 at 22:36

Calling Angular service from outside JS via .scope().call() hangs request

1 Answers1