AngularJS How to execute function after some function finish?

Question

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?

You can do it using promise. As in return defer variable after calling defer.resolve(), where defer=$q. And use the.then() method's first param for doing the task. — Tirthraj Barot
– Tirthraj Barot, Commented Nov 20, 2016 at 10:36
@TirthrajBarot would you like to answer with some code example? maybe with my code? — Dark Cyber
– Dark Cyber, Commented Nov 20, 2016 at 10:41
And I think you can do it using $rootScope too... Just set $rootScope.fb_isLogin=true in your login function and put this rootScope variable in ng-hide — Tirthraj Barot
– Tirthraj Barot, Commented Nov 20, 2016 at 10:46
@TirthrajBarot looks like i'm interesting with your first comment :D maybe you would like to help me. — Dark Cyber
– Dark Cyber, Commented Nov 20, 2016 at 10:50

Tirthraj Barot · Accepted Answer · 2016-11-20 11:31:31Z

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

George Otieno · Accepted Answer · 2016-11-20 11:30:39Z

0

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

answered Nov 20, 2016 at 11:30

George Otieno

5464 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS How to execute function after some function finish?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related