Reputation: 946
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="angular.js@1.4.x" 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: 'xyz@gmail.com'
};
$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
}]);
Upvotes: 1
Views: 139
Reputation: 196
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: 'xyz@gmail.com'
};
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
}]);
I have use the $q.I think this will help you
Upvotes: 1
Reputation: 6440
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}
);
Upvotes: 0
Reputation: 369
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
Upvotes: 1