AngularJS modalpopup Service call Cannot read property of undefined

Question

I got an issue with Angular JS popup. I am submitting the data from the popup and I want to pass the data to a taskService so that it can call a WebAPI and store on to my DB. This is my Call from BoardCtrl to open the Modal window

$scope.showAddTask = function () {
        modalService.showModal({
            templateUrl: "Partials/AddTask.html",
            controller: "taskCtrl",
            inputs: {
                title: "Add Task"
            }
        }).then(function (modal) {
            //debugger;
            modal.element.modal();
            modal.close.then(function (result) {
            });
        });
    };

Now the user keys in the Task details and Submits. The call is in my taskCtrl The debugger does hit the code below and I can see the values submitted by the end user. The problem I am facing is that I am getting an error at taskService.addTask invocation The error is "Cannot read property 'addTask' of undefined"

    fpdApp.kanbanBoardApp.controller('taskCtrl', function ($scope, taskService) {

         $scope.close = function () {
                debugger;
                taskService.addTask($scope.Name, $scope.Desc, $scope.Estimate, 1).then(function (response) {
                    $scope.result = response.data;
                }, onError);
                close({
                    name: $scope.name,
                    Desc: $scope.Desc,
                    Estimate: $scope.Estimate,
                }, 500); // close, but give 500ms for bootstrap to animate
            };
});

Here is my taskService

fpdApp.kanbanBoardApp.service('taskService', function ($http, $q, $rootScope) {

    var addTask = function (name, desc, estimate, projectId) {
        debugger;
        //return $http.get("/api/TaskWebApi/AddTaskForProject").then(function (response) {
        //    return response.data;
        //}, function (error) {   
        //    return $q.reject(error.Message);
        //});
    };

});

Can some one please help/ guide me whats wrong here. Note that I have got other method calls working fine in the same service and controller. Thanks in Advance Venkat.

code should work.please add taskService code.. – Pankaj Parkar Feb 04 '15 at 18:12 — Pankaj Parkar, Feb 04 '15 at 18:12
Task Service code is updated above Thanks – user3302116 Feb 04 '15 at 19:20 — user3302116, Feb 04 '15 at 19:20
do it `this.addTak` instead of `var addTask ` – Pankaj Parkar Feb 04 '15 at 19:22 — Pankaj Parkar, Feb 04 '15 at 19:22

dfsq · Accepted Answer · 2015-02-04T17:28:34.363

0

You need to expose addTask method in service. Right now it's just a local variable which cannot be accessed from outside. When the service is constructed it should create proper object with necessary methods. So you should set addTask either with this.addTask = addTask or by returning object with such method:

fpdApp.kanbanBoardApp.service('taskService', function ($http, $q, $rootScope) {

    var addTask = function (name, desc, estimate, projectId) {
        return $http.get("/api/TaskWebApi/AddTaskForProject").then(function (response) {
            return response.data;
        }, function (error) {   
            return $q.reject(error.Message);
        });
    };

    return {
        addTask: addTask
    };
});

edited Feb 04 '15 at 17:28

answered Feb 04 '15 at 17:22

dfsq

191,768
25
236
258

if you are exposing method then it should be factory. – Pankaj Parkar Feb 04 '15 at 19:38
Yes, however it will work with service too. But you are right that it should be factory. – dfsq Feb 04 '15 at 21:20
Thanks mate, I accidentally forgot to add the addTask return in my controller – user3302116 Feb 05 '15 at 09:51

score 0 · Answer 2 · answered Feb 04 '15 at 19:38

Service always returns a singleton object and that can be used by application wide. You forget to write method inside service context,

change var addTask to this.addTask

Code

fpdApp.kanbanBoardApp.service('taskService', function($http, $q, $rootScope) {

    this.addTask = function(name, desc, estimate, projectId) {
        return $http.get("/api/TaskWebApi/AddTaskForProject").then(function(response) {
            return response.data;
        }, function(error) {
            return $q.reject(error.Message);
        });
    };
});

Hope this could help you. Thanks.

AngularJS modalpopup Service call Cannot read property of undefined

2 Answers2