How to access Scope value outside the method in angularjs

Question

In below AngularJS controller:

Initially I declared 2 global variables, x and y
Then I perform an AJAX call using $http.get() and I got the correct response from the backend, and kept the required response values in variables x and y.
In an alert message I am trying to print the values of x and y.

I have gone through other question and answers in Stack Overflow and it is a duplicate question, but it's not successful here.

app.controller('MyController', function($scope, $http, $rootScope) {
    $scope.x = '';
    $scope.y = '';
    $http.get('javaAngularJS').then(function (response) {
        var data = response.data;
        $scope.smsresult = data;
        //need to print following x and y values in below alert message
        $scope.x = $scope.smsresult.failure;
        $scope.y = $scope.smsresult.success;
    });

    alert(x+"   "+y);
});

But in the alert message, the values of x* and y are not printing. What's my mistake in above code?

Hennadii Bolshakov · Answer 1 · 2017-07-04T14:09:15.113

2

try to set 'x' and 'y' inside of response function like

$http.get('javaAngularJS').then(function (response)
{
  var data = response.data;
  $scope.smsresult = data;
  //need to print following x and y values in below alert message
  $scope.x = $scope.smsresult.failure;
  $scope.y = $scope.smsresult.success;
 alert($scope.x+"   "+$scope.y);
 });

Ajax call is async so when you print alert ajax is not done yet.

If you want to have processing logic outside success block you can put it in separate function and call it in success section :

$http.get('javaAngularJS').then(function (response)
{
  $scope.processSmsResponse(response);
});

$scope.processSmsResponse = function (response){
//your logic here
}

edited Jul 04 '17 at 14:09

answered Jul 04 '17 at 13:39

Hennadii Bolshakov

67
9

But I need to access values outside **$http.get()** method – Kamal Jul 04 '17 at 13:44
Then you need to improve your logic, and put in promise success block. Http request is asynchronous and JS not waiting until it down to go forward of your code. – Hennadii Bolshakov Jul 04 '17 at 13:46
@kamal For example $http.get('javaAngularJS').then(function (response) { var data = response.data; $scope.smsresult = data; processSmsResult( $scope.smsresult); }); – Hennadii Bolshakov Jul 04 '17 at 14:06
@Kamal You need to save the values to `$scope.x` and `$scope.y` for them to be available. As your code is now, both are undefined(as the value is stored in x and y and even then your code does not wait for the promise to resolve successfully). – cst1992 Jul 04 '17 at 15:36

score 0 · Answer 2 · answered Jul 04 '17 at 13:36

Should you not use $scope.x/y? Now they are undefined variables x and y.

x = $scope.smsresult.failure; y = $scope.smsresult.success;

to

$scope.x = $scope.smsresult.failure; $scope.y = $scope.smsresult.success;

(I would comment but don't have the karma)

score -1 · Answer 3 · answered Jul 04 '17 at 13:40

-1

app.controller('MyController', function($scope, $http, $rootScope)
{
$scope.x = '';
$scope.y = '';
$http.get('javaAngularJS')
.then(function (response)
{
    var data = response.data;
    $scope.smsresult = data;
    //need to print following x and y values in below alert message
    $scope.x = $scope.smsresult.failure;
    $scope.y = $scope.smsresult.success;
});
alert($scope.x+"   "+$scope.y);
});

answered Jul 04 '17 at 13:40

Arun Sahani

72
6

This will print empty for both values. – cst1992 Jul 04 '17 at 15:36

How to access Scope value outside the method in angularjs

3 Answers3