Angular $scope object not getting assigned

Question

I'm trying to assign an object through a service to a $scope object. However I get an error saying that the object is undefined. I'm making an asynchronous call to get the object and below I've used $timeout service to simulate the same. I've tried $q.defer() and returned a promise suspecting it to be a timing issue and also called $apply() to invoke binding but nothing seems to be working. Below is the link to the code in plunker. Pls help me out with this. http://plnkr.co/edit/wyF4Bx1a39IEWS3m8Loe?p=info

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="profctrl">
  <p>Hello {{usr}}!</p>
</body>

</html>

var ub = angular.module('app', []);
ub.controller('profctrl', ["$scope", "formsub", "$log", "$timeout", function($scope, formsub, $log, $timeout) {
  $log.log("In Profile controller");
  $scope.msg = "";
  $scope.usr = {};

  var fbresponse = {
    name: 'xyz',
    email: '[email protected]'
  };

  $scope.usr = formsub.getprof(fbresponse);
  $timeout(function() {
    $log.log('$scope.usr', $scope.usr);
  }, 2000);
}]);

ub.service('formsub', ["$http", "$log", "$q", "$timeout", function($http, $log, $q, $timeout) {
  var user = {};
  var self = this;

  self.msg = "";


  self.getprof = function(user) {

      $timeout(function() {
        $log.log('user assigned');
        return user;
      }, 2000);

    } //getprof

}]);

Possible duplicate of How do I return the response from an asynchronous call? — Tamas Hegedus
– Tamas Hegedus, Commented Aug 27, 2016 at 15:43

Tojo Paul Mangaly · Accepted Answer · 2016-08-27 16:09:38Z

1

var ub = angular.module('myApp', []);
ub.controller('profctrl', ["$scope", "formsub", "$log", "$timeout", function($scope, formsub, $log, $timeout) {
$log.log("In Profile controller");
$scope.msg = "";
$scope.usr = {};

var fbresponse = {
name: 'xyz',
email: '[email protected]'
};
formsub.getprof(fbresponse).then(function(result) {
$scope.usr = result;
alert(JSON.stringfy(result));
});

}]);

ub.service('formsub', ["$http", "$log", "$q", "$timeout", function($http, $log, $q, $timeout) {
 var user = {};
 var self = this;
 self.msg = "";
 self.getprof = function(user) {
  var deferral = $q.defer();
  $timeout(function() {
    $log.log('user assigned');
    deferral.resolve(user);
  }, 2000);
  return deferral.promise;
} //getprof
}]);

Demo

I have use the $q.I think this will help you

answered Aug 27, 2016 at 16:09

Tojo Paul Mangaly

1961 silver badge11 bronze badges

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

1 Comment

Rajkumar Kaliyaperumal Over a year ago

Thanks Tojo. That helped!! I tried it earlier but as below. thats why I had an issue. $scope.usr = formsub.getprof(fbresponse).then()

ciril sebastian · Accepted Answer · 2016-08-27 15:38:54Z

1

Module name is app instead of plunkr in the html ng-app

answered Aug 27, 2016 at 15:38

ciril sebastian

5494 silver badges13 bronze badges

1 Comment

Rajkumar Kaliyaperumal Over a year ago

Thanks Ciril. Apologies for the miss,but that was not my issue.

Kunal Sharma · Accepted Answer · 2016-08-27 15:41:29Z

1

Firstly, You have given the wrong module name, it should be ng-app="app". Now if you use $q it will work correctly. here is plunkr

answered Aug 27, 2016 at 15:41

Kunal Sharma

3692 silver badges20 bronze badges

2 Comments

Rajkumar Kaliyaperumal Over a year ago

Thanks Kunal. That helped!! I tried it earlier but as below. thats why I had an issue. $scope.usr = formsub.getprof(fbresponse).then()

Kunal Sharma Over a year ago

@RajkumarKaliyaperumal what exactly do you want to implement? can you briefly clarify?

Developer · Accepted Answer · 2016-08-27 15:54:48Z

0

You should be using promise to get your data from $http as the ajax call is asynchronous. You could either use $q or return the $http itself which is inturn a defferred object.

Service:

  self.getprof = function(user) {
  var deff = $q.defer();
  //could be get/post/put...
    $http.post(your_api_url, user).
     then(
          function(data){ deff.resolve(data);   },
          function(ex) { deff.reject(ex); }
       );
         deff.promise;

    }

And in controller:

formsub.getprof(user).
  then(
          function(data){
                 // success call back 
                $scope.usr = data;
             },
          function(ex) { // error call back. Handle error here}
       );

answered Aug 27, 2016 at 15:54

Developer

6,4703 gold badges21 silver badges24 bronze badges

2 Comments

Rajkumar Kaliyaperumal Over a year ago

Thanks . That helped!! I tried it earlier but as below. thats why I had an issue. $scope.usr = formsub.getprof(fbresponse).then()

Developer Over a year ago

@Rajkumar - Glad I helped. Cheers.

Collectives™ on Stack Overflow

Angular $scope object not getting assigned

4 Answers 4

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related