Sorakthun Ly Sorakthun Ly - 4 months ago 14
AngularJS Question

Change $scope variable from submit() that sends http post request

I can't set the value for

$scope
in a success response from
$http.post
request. The post request is sent through
submit()
function from a form submit using
ng-submit="submit()"
.

chatApp.controller('createController', ['$scope', '$http', '$location', function($scope, $http, $location) {
$scope.fullname;
$scope.create = function() {
// console.log($scope.email, $scope.password, $scope.firstname, $scope.lastname);
$http.post('ajax/createaccount.php', {
'email': $scope.email,
'username': $scope.username,
'password': $scope.password,
'firstname': $scope.firstname,
'lastname': $scope.lastname
}).then(function(data) {
console.log("Success");
$scope.fullname = data.config.data.firstname + " " + data.config.data.lastname;
console.log($scope.fullname);
$location.path("/createsuccess");
}, function() {
console.log("Error");
})
}
console.log($scope.fullname);
}]);


The first
console.log($scope.fullname)
outputs the right data.

The second
console.log($scope.fullname)
outputs 'undefined'.

I appreciate everyone who takes the time to look at this.

Answer

This is very basic. An AJAX request is an asynchronous request which is executed asynchronously. So when you submit your form using the $http method (which is posting data to the server using AJAX), the success callback will be executed after the server responded.

So you can't expect your last console statement to execute after your form submission.

chatApp.controller('createController', ['$scope', '$http', '$location', function($scope, $http, $location) {

    console.log("1");
    $scope.fullname;

    $scope.create = function() {
        console.log("2");
        $http.post('ajax/createaccount.php', {
            'email': $scope.email // your data
        }).then(function(data) {
            console.log("3");
        }, function() {
            console.log("Error");
        })

        console.log("4");
    }

    console.log("5");
}]);

When your createController will instantiate, you will first see the output 1 and then 5. And when you submit your form using create() method, then you will see the output 2 -> 4 and after a few seconds 3.

Edit

To actually fix your issue which you commented, you can use the $rootScope but using $rootScope is not recommended. So I suggest you create a global controller and assign it to your body tag like

<body ng-controller="GlobalController">

And define an object there:

chatApp.controller("GlobalController", ["$scope", function($scope) {

    $scope.globalData = {};
}]);

This will create a common Angular scope throughout your application so that you can hold common & generic data. And every child controller (like createController in this case) will inherit data from this global controller.

Now, modify your createController code like this:

chatApp.controller('createController', ['$scope', '$http', '$location', function ($scope, $http, $location) {

    $scope.create = function () {
        // console.log($scope.email, $scope.password, $scope.firstname, $scope.lastname);
        $http.post('ajax/createaccount.php', {
            'email': $scope.email,
            'username': $scope.username,
            'password': $scope.password,
            'firstname': $scope.firstname,
            'lastname': $scope.lastname
        }).then(function (data) {
            console.log("Success");
            $scope.globalData.fullname = data.config.data.firstname + " " + data.config.data.lastname;
            console.log($scope.fullname);
            $location.path("/createsuccess");
        }, function () {
            console.log("Error");
        })
    };

    console.log($scope.globalData.fullname);
}]);

Alternatively, you can create a Angular service/factory to hold the common data.