Nenad Milosavljevic Nenad Milosavljevic - 1 month ago 18
Javascript Question

Angular.js Service function undefined

I'm having a controller and servise (I will post all of controller and service code because I have no idea what could be wrong) :

Controller:

'use strict';
app.controller('membersController', ['$scope', 'membersService', function($scope, membersService) {
$scope.members = [];
$scope.updatedMembers = [];
membersService.getMembers().then(function (results)
{
$scope.members =results.data;
},
function(error) {
alert(error.data.message);
});
$scope.update = function () {
membersService.updateMembers($scope.updatedMembers).then(function(results) {
alert(results);
},
function(results) {
alert(results);
});
};
$scope.updateActive = function(member) {
if ( !isInArray($scope.updatedMembers,member))
{
$scope.updatedMembers.push(member);
}
};
var isInArray = function(array, item) {
var found = false;
for (var i = 0; i < array.length; i++) {
if (array[i].id == item.id) {
found = true;
break;
}
}
return found;
};
}]);


Service:

'use strict';
app.factory('membersService', ['$http', 'ngAuthSettings', function ($http, ngAuthSettings) {
var serviceBase = ngAuthSettings.apiServiceBaseUri;
var membersServiceFactory = {};
var _getMembers = function () {
return $http.get(serviceBase + 'api/members').then(function (results) {
return results;
});
};
var _updateMembers = function(updatedMembers) {
$http.post(serviceBase + 'api/Members/UpdateMembers', updatedMembers, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(
function (results) {
return results;
},
function(results) {
return results;
});
};
membersServiceFactory.getMembers = _getMembers;
membersServiceFactory.updateMembers = _updateMembers;
return membersServiceFactory;
}]);


This is error that i'm getting in firebug:

Error:
membersService.updateMembers(...) is undefined
$scope.update@http://localhost:37272/Controllers/membersController.js:16:13
$a.prototype.functionCall/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:172:370
fc[c]</<.compile/</</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:189:395
Yd/this.$get</h.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:108:471
Yd/this.$get</h.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:109:230
fc[c]</<.compile/</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:189:370
ne/c/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:31:30
q@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:7:363
ne/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:31:14


Can anyone at LEAST point me to the right direction as i'm new in angular.js. Also i would like to notice that request is passed to .net webapi even with this error

Answer

If in controller you want to use it like a promise object, I mean:

  $scope.update = function () {
        membersService.updateMembers($scope.updatedMembers).then(function(results) {
            alert(results);
        },
        function(results) {
            alert(results);
        });
    };

then you should return promise object, $http get method itself is returning promise.

'use strict';
app.factory('membersService', ['$http', 'ngAuthSettings', function ($http, ngAuthSettings) {
     var serviceBase = ngAuthSettings.apiServiceBaseUri;
    var membersServiceFactory = {};
    var _getMembers = function () {
         return $http.get(serviceBase + 'api/members');
    };
var _updateMembers = function(updatedMembers) {
        $http.post(serviceBase + 'api/Members/UpdateMembers', updatedMembers, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });;
    };
    membersServiceFactory.getMembers = _getMembers;
    membersServiceFactory.updateMembers = _updateMembers;
    return membersServiceFactory;
}]);
Comments