CODEWITHSUNDEEP
angularjs
Dark Cyber
Dark Cyber

Reputation: 2231

AngularJS How to execute function after some function finish?

I have some page which contain register with facebook button which I set hidden with ng-hide="fbLoggedIn" and form input which I set hidden with ng-show="fbLoggedIn"

My goal is register with facebook button will hide if fbLoggedIn set to true and form input will show if fbLoggedIn set to true.

register facebook button ng-click="registerFb()" execute this function

$scope.registerFB = function () {

        authService.fbLogin();
        $scope.fbLoggedIn = authService.fb_logged_in();
        console.log($scope.fbLoggedIn); //this show false even `fb_access_token` not null

    }

Here is my authService.fbLogin and authService.fb_logged_in function

authService.fbLogin = function () {

        var FB = window.FB;

        FB.login(function(response) {
        console.log(response);

    if (response.authResponse) {
        sessionService.set('fb_id', response.authResponse.userID);
        sessionService.set('fb_access_token', response.authResponse.accessToken);
        sessionService.set('fb_expiration_date', new Date(new Date().getTime() + response.authResponse.expiresIn * 1000).toISOString());
     //console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
         console.log(response);


     });

    } else {
     console.log('User cancelled login or did not fully authorize.');
     //console.log(response);
    }
    });

};

authService.fb_logged_in = function () {
    if(sessionService.get('fb_access_token') != null){
        return true;
    }else {
        return false;       
    }
};

In other function I try to check if fb_access_token is not null, just to make sure something wrong with my logic, and the result is true.

With above debuggin I can say that $scope.fbLoggedIn = authService.fb_logged_in(); execute before authService.fbLogin(); finish.

So how I can execute $scope.fbLoggedIn = authService.fb_logged_in(); after authService.fbLogin(); finish? maybe how to achieve my goal?

Upvotes: 0

Views: 774

Answers (2)

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

Alright. This can be achieved using promise. I don't know the parameters you have included in your autService service, so I will be making a factory of the same name with the new parameters that you might need to add.

Hence, according to me, this is how your factory should be.

angular.module('YourModuleName').factory('authService',['$http','$q',function($http,$q){

    var obj = {};
    obj.fbLogin = function () {
        var defer = $q.defer();
        var FB = window.FB;
        FB.login(function(response) {
            console.log(response);

            if (response.authResponse) {
                sessionService.set('fb_id', response.authResponse.userID);
                sessionService.set('fb_access_token', response.authResponse.accessToken);
                sessionService.set('fb_expiration_date', new Date(new Date().getTime() + response.authResponse.expiresIn * 1000).toISOString());
                FB.api('/me', function(response) {
                   console.log(response);
                   defer.resolve('Good to see you, ' + response.name + '.');
               });

            } 
            else {
                defer.reject('User cancelled login or did not fully authorize.');
            }
        });
        return defer.promise;
    }

    obj.fb_logged_in = function () {
        if(sessionService.get('fb_access_token') != null){
            return true;
        }else {
            return false;       
        }
    };


    return obj;

}])

And thus, the function call from the controller should be as follows.

$scope.registerFB = function () {
    authService.fbLogin().then(function(response){
        $scope.fbLoggedIn = authService.fb_logged_in();
        console.log($scope.fbLoggedIn);

    },function(error){
        console.error("Error : ",error);
    });
}
Note: CODE NOT TESTED.

Hence it would solve the problem with the best practices of angularJS

Upvotes: 2

George Otieno
George Otieno

Reputation: 546

use the $rootscope to assign values they provide event emission/broadcast and subscription facility.

Upvotes: 0

Related Questions