Question

63

How to handle callback in angularjs?

rated 0 times [ 66] [ 3] / answers: 1 / hits: 35141 / 10 Years ago, wed, january 7, 2015, 12:00:00

I have a registration mechanism in which rootscope variable is send via service. After success it updates the $rootScope.success field. But the angularjs services is callback dependent.The service update the rootscope.success but the function sequentially execute the code.

How do i wait for service to complete its response and then further process?

.controller('RegisterAccountCtrl', function ($scope,$rootScope,registerUser,$location) {



    $rootScope.success = false;

    $scope.registration = $rootScope.registration;



$scope.getEnterGeneratedCode = function(){

        $rootScope.registration = $scope.registration;

        registerUser.registerUser();

        if($rootScope.success){

           $location.path('/confirm');

        }

}

And inside service

.service('registerUser',function($http,$rootScope,$ionicLoading){

    this.registerUser = function(){

        $ionicLoading.show();

        $http({

            method: 'POST',

            datatype:'json',

            data:{obj:$rootScope.registration},

            url: 'http://localhost/LoginService.asmx/CreateUser',

            contentType: application/json; charset=utf-8,

            cache: false

        }).success(function (data, status, headers, config){

            if (status == '200') {

                var obj = data;

                $rootScope.success = true;

                $ionicLoading.hide();

                //alert(obj);

            }

        }).error(function (data, status, headers, config){

            $ionicLoading.hide();

        });

    };



 return this;

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryderalfonsos

Add To Favorites

Follow

Total Points: 655

Total Questions: 88

Total Answers: 91

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

ryderalfonsos questions

1 React application with Service Worker - Force update of browser cache on new version

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Call Action Method on button click ASP.NET MVC

Mon, Sep 9, 19, 00:00, 5 Years ago

1 Customizing the JS/CSS in a TrustPilot widget

Wed, Feb 13, 19, 00:00, 5 Years ago

1 How to display a string javascript in HTML

Tue, Feb 12, 19, 00:00, 5 Years ago

1 How to make an undo function in canvas?

Fri, Dec 28, 18, 00:00, 6 Years ago

View All

answered 10 Years ago brendaw · Accepted Answer

You want to return your $http request from registerUser which can then be used in your controller in the same way you are using it in the service.

Controller:

registerUser.registerUser().success(function(data, status, headers, config){

   //This code will now execute when the $http request has resolved with a success

   if($rootScope.success){

      $location.path('/confirm');

   }

}).error(function(error, status, headers, config){

   //An error occurred in $http request

   console.log(error); 

});

Service:

this.registerUser = function(){

    $ionicLoading.show();

    return $http({

        method: 'POST',

        datatype:'json',

        data:{obj:$rootScope.registration},

        url: 'http://localhost/LoginService.asmx/CreateUser',

        contentType: application/json; charset=utf-8,

        cache: false

    }).success(function (data, status, headers, config){

        if (status == '200') {

            var obj = data;

            $rootScope.success = true;

            $ionicLoading.hide();

            //alert(obj);

        }

    }).error(function (data, status, headers, config){

        $ionicLoading.hide();

    });

};

A few things worth noting...

You are returning from a service which is not required, a service works as an instance and so the instance is already injected. It is a factory (singleton) that requires a return.

You are setting $scope.registration to be the same as $rootScope.registration and then setting $rootScope.registration to be the same as $scope.registration in your getEnterGeneratedCode function which is unnessasary and should be prototypicaly inherited anyway.

You should always try to defined depedencys with like so:

.controller('RegisterAccountCtrl', ['$scope', '$rootScope', 'registerUser', '$location', function($scope, $rootScope, registerUser, $location){



}]);

Unless $rootScope.success is being used elsewhere its currently pointless to set and I would recommend avoiding setting props on your $rootScope as it can quickly get out of control.

Here is a simplified version of your code:

.controller('RegisterAccountCtrl', [

    '$scope',

    '$rootScope',

    'registerUser',

    '$location',

function($scope, $rootScope, registerUser, $location) {



    $scope.getEnterGeneratedCode = function() {

        $ionicLoading.show();

        registerUser.registerUser().success(function(data, status, headers, config) {

            if (status == '200') {

                var obj = data;

                $ionicLoading.hide();

                $location.path('/confirm');

                //alert(obj);

            }

        }).error(function(data, status, headers, config) {

            $ionicLoading.hide();

        });



    }



}])



.service('registerUser', [

    '$http',

    '$rootScope',

    '$ionicLoading',

function($http, $rootScope, $ionicLoading) {



    this.registerUser = function() {

        return $http({

            method: 'POST',

            datatype: 'json',

            data: {

                obj: $rootScope.registration

            },

            url: 'http://localhost/LoginService.asmx/CreateUser',

            contentType: application/json; charset=utf-8,

            cache: false

        });

    };



}]);