angularjsmodalpopup

AngularJS modalpopup Service call Cannot read property of undefined


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.


Solution

  • 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
        };
    });