Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – Assigning $scope variables in Angular after service function call

I’m trying to assign values to $scope variables after a particular function call is over. But since JS engine processes requests asynchronously it assigns the variables before the function call is over. How do I resolve this. Below is the code snippet where I’m trying to assign $scope variables isAuth,msg,profpic etc after the fblogin function call.

//controller
ub.controller('mainController',['$scope','$log','$http','fbauthFact','$location','$anchorScroll','$routeParams',function($scope,$log,$http,fbauthFact,$location,$anchorScroll,$routeParams){

    $scope.profpic="";
    $scope.msg={};


    $scope.fblogin= function(){
        $scope.fblogincb(function callback(){
            $scope.isAuth = fbauthFact.isAuth;
            $scope.msg= fbauthFact.msg;
            $scope.profpic=fbauthFact.profpic;
            $scope.accesstoken=fbauthFact.accesstoken;
            $log.log("$scope.msg: "+$scope.msg);
            $log.log("$scope.isAuth:"+$scope.isAuth);
        });

    };

    $scope.fblogincb=function(callback){
        fbauthFact.fblogin();  
        callback();
    };    
}]);

//service

    ub.service('fbauthFact',["$http","$log","$rootScope",function($http,$log,$rootScope){

        this.isAuth=false;
        this.profpic=""
        this.fbresponse={};
        this.msg="";
        var self=this;
        self.testAPI =function() {
            FB.api('/me',{fields: 'first_name,last_name,gender,email,picture'}, function(response) {

                this.fbresponse = response;
                this.profpic = response.picture.data.url;
                this.isAuth=true;
                this.accesstoken = FB.getAuthResponse().accessToken;

                document.getElementById('status').innerHTML =
                'Thanks for logging in, ' + response.first_name + '!';
                document.getElementById('profpic').innerHTML =
                "<img src='" + response.picture.data.url + "'>";


                $http({
                method:"GET",
                url: "http://localhost:3000/api/creaprof",
                params: response
                }).then(function successCallback(srresponse){
                        this.msg=srresponse.data;    
                        $log.log("http get request success: "+this.msg);
                        },
                        function errorCallback(srresponse){
                            $log.log("http get request failure"+srresponse.data);
                        });

                $rootScope.$apply();

            });//FB.api call back function


        };//testAPI

        this.fblogin =function(){
            FB.login(function(response){

                if (response.status === 'connected') {
                  // Logged into your app and Facebook.
                  self.testAPI();
                } else if (response.status === 'not_authorized') {
                  // The person is logged into Facebook, but not your app.
                  document.getElementById('status').innerHTML = 'Please log ' +
                    'into this app.';
                } else {
                  // The person is not logged into Facebook, so we're not sure if
                  // they are logged into this app or not.
                  document.getElementById('status').innerHTML = 'Please log ' +
                    'into Facebook.';
                }       
            });       
        };//fblogin


    }]);
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thanks @Salih. your answer helped me to use $q service with promise to resolve my issue. But I had to use it in a different places. Here's my working code.

    //controller

ub.controller('mainController',['$scope','$log','$http','fbauthFact','$location','$anchorScroll','$routeParams',function($scope,$log,$http,fbauthFact,$location,$anchorScroll,$routeParams){

    $scope.profpic="";
    $scope.msg={};
    $scope.isAuth = false;



    $scope.fblogin= function(){
        fbauthFact.fblogin().then(
                function(response){
                $scope.isAuth = fbauthFact.isAuth;
                $scope.msg= fbauthFact.msg;
                $scope.profpic=fbauthFact.profpic;
                $scope.accesstoken=fbauthFact.accesstoken;
                //$scope.$apply();
                $log.log("fblogin() - success :"+response);
                $log.log("$scope.msg: "+$scope.msg);
                $log.log("$scope.isAuth:"+$scope.isAuth);
                $log.log("$scope.profpic:"+$scope.profpic);

            },function(reason){
                 $log.log("fblogin() - failure :Need to login to the application :"+reason);
            })

        };

}]);

//factory
ub.service('fbauthFact',["$http","$log","$rootScope","$q",function($http,$log,$rootScope,$q){

    this.isAuth=false;
    this.profpic=""
    this.fbresponse={};
    this.msg="";
    var self=this;

    self.testAPI =function() {
        var tAdef = $q.defer();
        FB.api('/me',{fields: 'first_name,last_name,gender,email,picture'}, function(response) {
            self.fbresponse = response;
            self.profpic = response.picture.data.url;
            self.isAuth=true;
            self.accesstoken = FB.getAuthResponse().accessToken;
            // console.log('Successful login for: ' + response.first_name);
            //console.log('email:' + (response.email));
            document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.first_name + '!';
            document.getElementById('profpic').innerHTML =
            "<img src='" + response.picture.data.url + "'>";


            //$scope.profpic = authFact.profpic;

            //$log.log('profpic:'+$scope.profpic);
            //$log.log('isAuth:'+$scope.isAuth);
            //$log.log('$scope.fbresponse :'+$scope.fbresponse );

            $http({
            method:"GET",
            url: "http://localhost:3000/api/creaprof",
            params: response
            }).then(function successCallback(srresponse){
                    self.msg=srresponse.data;    
                    $log.log("http get request success: "+self.msg);
                    tAdef.resolve('http get request success');
                    },
                    function errorCallback(srresponse){
                        $log.log("http get request failure:"+srresponse.data);
                        tAdef.reject('http get request failure');
                    });

            $rootScope.$apply();

        });//FB.api call back function

        return tAdef.promise;

    };//testAPI

    this.fblogin =function(){
        var deferred = $q.defer();
        FB.login(function(response){

            if (response.status === 'connected') {
              // Logged into your app and Facebook.
                 self.testAPI().then(
                 function(resolved){
                     $log.log('testAPI() - success');
                    deferred.resolve('connected');    
                 },
                function(rejected){
                    $log.log('testAPI() - failure');
                    deferred.reject('error connecting');
                });

            } else if (response.status === 'not_authorized') {
              // The person is logged into Facebook, but not your app.
                deferred.reject('not_authorized');
                document.getElementById('status').innerHTML = 'Please log ' +
                'into this app.';
            } else {
              // The person is not logged into Facebook, so we're not sure if
              // they are logged into this app or not.
                 deferred.reject('not logged in');
                document.getElementById('status').innerHTML = 'Please log ' +
                'into Facebook.';
            } 

        }); 
        return deferred.promise;
    };//fblogin

}]);

  2. 0

    In your Service, change fblogin method like below so that it returns a promise.

    this.fblogin =function(){
        FB.login(function(response){
            var deferred = $q.defer();
            if (response.status === 'connected') {
              // Logged into your app and Facebook.
              deferred.resolve('connected');
              self.testAPI();
            } else if (response.status === 'not_authorized') {
              // The person is logged into Facebook, but not your app.
              deferred.reject('not_authorized');
              document.getElementById('status').innerHTML = 'Please log ' +
                'into this app.';
            } else {
              // The person is not logged into Facebook, so we're not sure if
              // they are logged into this app or not.
              deferred.reject('not_logged_in');
              document.getElementById('status').innerHTML = 'Please log ' +
                'into Facebook.';
            }   
            return deferred.promise;    
        });       
    };//fblogin

    Then in your controller call it like 

    $scope.fblogin=function(){
    fbauthFact.fblogin().then(function(response){
        //assign your variables if login is successfull
    },function(response){
        // do smt if not_authorized or not_logged_in
    }) 
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search