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?

• Tirthraj Barot: 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.
• Dark Cyber: @TirthrajBarot would you like to answer with some code example? maybe with my code?
• Tirthraj Barot: 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
• Dark Cyber: @TirthrajBarot looks like i'm interesting with your first comment :D maybe you would like to help me.
• Tirthraj Barot: 😄 certainly man.. Give me 30 mins..!

Answer 1

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

Answer 2

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