using service in Angular JS cannot return the scope value

Question

I just tried to create a service in Angular JS , it succeeded call the function $http.get and return the value. However the value isnot inserted into the scope variable. Question : what is wrong?

 angular.module('starter.controllers', [])
.factory('UserService', function($http) {
var data;   
      return{
          getData: function($http) {
              return  $http.get('http://www.website.com/call12').
                    success(function(response) {
                     /// console.log(JSON.stringify(response));
                      userData=response.data;
                            return userData;

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

          }
    }
 })


 .controller('AppCtrl', function($scope, $ionicModal,    $interval,$http,$rootScope,UserService) {

$scope.formData={};
 $scope.userData={};

$scope.myCtrl= function(UserService,$http,$rootScope) {

  UserService.getData($http).then(function(data,$rootScope) {
$scope.userData = data;

 $scope.fullName =  data.name;  
 $scope.balance =  data.balance;

   }}

  $scope.formData.playerName= $scope.userData.name; // $scope.userData is undefined

 $scope.myCtrl(UserService,$http);
 })

Templates

<form ng-submit="submit_editpw()" ng-controller="AppCtrl">  
<pre>userData : {{userData}}</pre> //retuns data
<pre>name: {{fullName}}</pre> //returns empty
</form>

dfsq · Accepted Answer · 2015-01-16 06:15:10Z

2

You are not using asynchronous getData method right. Since this is a promise object you should use its then method:

UserService.getData().then(function(data) {
    $scope.userData = data;
});

Also make sure getData returns a promise:

getData: function () {
    return $http.get('http://m.sepakbola.cc/index.php/id/user/call12').success(function (response) {
        userData = response.data;
        return userData;
    }).error(function (data, status, headers, config) {
        // log error
    });
}

answered Jan 16, 2015 at 6:15

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

xyonme Over a year ago

hi . I got error. TypeError: UserService.getData(...) is undefined script: UserService.getData().then(function(data) { $scope.userData = data; });

dfsq Over a year ago

Make sure getData returns promise: return $http.get(...).

xyonme Over a year ago

Hi @dfsq I got issue when I try to get the service variable value. can you help me? for example ` $scope.fullName = data.name; ` ` // fullName is still empty` outside the function ` $scope.formData.playerName= $scope.userData.name; ``// $scope.userData is undefined`

dfsq Over a year ago

Note, that you can't access data until it's loaded. So if you are trying to do in outside then it might be not yet available.

xyonme Over a year ago

it has finished loading the http request and the value of userData.data.name can be viewed in template but fullName in template is still empty. and what about this $scope.formData.playerName= $scope.userData.name; // $scope.userData is undefined `

xyonme · Accepted Answer · 2015-01-16 07:46:37Z

In the service return the promise as response and in the controller using the promise success callback assign the value to the userData

 angular.module('starter.controllers', [])
.factory('UserService', function($http) {
var data;   
      return{
          getData: function() {
                  return $http.get('http://www.website123.com/call12');
          }
    }
 })


 .controller('AppCtrl', function($scope, $ionicModal, interval,$http,$rootScope,UserService) {
      $scope.myCtrl= function(UserService,$http) {
      $scope.userData={};

      UserService.getData().success(function(reponse) {
          $scope.userData=response.data;
      });

}

Collectives™ on Stack Overflow

using service in Angular JS cannot return the scope value

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related