Parv Sharma Parv Sharma - 5 months ago 13
AngularJS Question

angular JS service is null inside the controller

This is my first learning project for angular js.

i have created a controller(

EditEventsController
) and a service(
eventData
).
Code for the EditEventController is

'user strict'
eventsApp.controller("EditEventController",
function EditEventController($scope,eventData) {
$scope.saveEvent = function (event, newEventForm, eventData) {
if (newEventForm.$valid) {
eventData.save(event);
}
}
});


and that of the eventData service is

eventsApp.factory('eventData', function ($q, $resource) {
var resource = $resource('data/event/:id.js', { id: '@id' });
return {
getEvent: function () {
return {...}
},
save: function (event) {
event.id = 999;
var deferred = $q.defer();

resource.save(event,
function (response) { deferred.resolve(response); },
function (response) { deferred.reject(response); });

return deferred.promise;
}
};
});


Html page where im using this controller is named newEvent.html and these are the scripts im adding

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/services/EventData.js"></script>

<script src="js/filters.js"></script>


still when im trying to call
eventData.save(event)
. inside the EditEventsController its giving me an error because
eventData
is
null
there and therefore i cannot call the
save()
function.

The complete error in console is

TypeError: Cannot call method 'save' of undefined
at Object.EditEventController.$scope.saveEvent (http://localhost:9669/app/js/controllers/EditEventController.js:6:27)
at elementFns (http://localhost:9669/app/lib/angular/angular.js:6365:19)
at ngEventDirectives.(anonymous function) (http://localhost:9669/app/lib/angular/angular.js:12987:13)
at Object.$get.Scope.$eval (http://localhost:9669/app/lib/angular/angular.js:8057:28)
at Object.$get.Scope.$apply (http://localhost:9669/app/lib/angular/angular.js:8137:23)
at Object.ng.config.$provide.decorator.$delegate.__proto__.$apply (http://localhost:9669/app/newEvent.html:855:30)
at HTMLButtonElement.ngEventDirectives.(anonymous function) (http://localhost:9669/app/lib/angular/angular.js:12986:17)
at event.preventDefault (http://localhost:9669/app/lib/angular/angular.js:1992:10)
at Array.forEach (native)
at forEach (http://localhost:9669/app/lib/angular/angular.js:130:11)


What am i doing incorrectly here? im sure this is something small

Answer

Below should work according to me because you are overriding the eventData again in inner function which might not be passed correctly.

'user strict'
eventsApp.controller("EditEventController",
    function EditEventController($scope,eventData) {
        $scope.saveEvent = function (event, newEventForm) {
            if (newEventForm.$valid) {
                eventData.save(event);
            }
        }
    });
Comments