AngularJS - Service is not defined error in function but fine in controller - ReferenceError: systemService is not defined

Question

I'm really new to AngularJS so this might be really obvious!

I've got a service which does some basic checks and then returns the information. I call this service in a controller and in a function.

When I call it in the controller it works fine without an error.

When I call it in the function I get

angular.js:9101 ReferenceError: systemService is not defined

Call to service in Controller that works:

myApp.controller('continueController', ["$scope", "$rootScope", 'systemService', function ($scope, $rootScope, systemService) {
            $scope.ContinueAngularMethod = function () {

                $rootScope.field = 'payment';
                $scope.field = $rootScope.field;
                $scope.notApp = '1';
                console.log("I don't error in here");
                $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
                $rootScope.$apply();
            }
        }]);

Call to service in function that doesn't work:

function MyCtrl($scope) {

                $scope.changeme = function () {
                    console.log("Drop down changes ideally do something here....");

                    //Call to service  
                    $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);

                    console.log($scope.ss.field);
                    console.log($scope.ss.notAppJ);

                }

This is my code in full:

<script type='text/javascript'>

        //Angular stuff
        var myApp = angular.module('myApp', []);

        //Set up my service
        myApp.service('systemService', function () {

            this.info = {}; //Declaring the object

            this.checkDropDownValue = function (type, notAppJ) {


                if (type != 'PayPal') {
                    console.log("I am not PayPal");
                    field = 'other'
                    notApp = '0';
                }
                else if (type == 'PayPal' && notApp == '1') {
                    console.log("i am in the else if - functionality later");
                }
                else {
                    console.log("i am in the else - functionality later");
                }

                this.info.field = type;
                this.info.number = notApp;

                return this.info;
            };

        });

        myApp.controller('continueController', ["$scope", "$rootScope", 'systemService', function ($scope, $rootScope, systemService) {
            $scope.ContinueAngularMethod = function () {

                $rootScope.field = 'payment';
                $scope.field = $rootScope.field;
                $scope.notApp = '1';
                console.log("I don't error in here");
                $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);
                $rootScope.$apply();
            }
        }]);

        function MyCtrl($scope) {

            $scope.changeme = function () {
                console.log("Drop down changes ideally do something here....");

                //Call to service  
                $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);

                console.log($scope.ss.field);
                console.log($scope.ss.notAppJ);

            }

            $scope.myFunct = function (keyEvent) {

            if (keyEvent.which === 13) {
                //They hit the enter key so ignore this 
                keyEvent.preventDefault();
            }

            //Becauase a new child scope is generated you can't use $scope as that refers to the parent . But this refers to the child. 
            var rPromise = findAll(this.softwareText);

            }
        }

    </script>

I tried these without any luck:

angular Uncaught ReferenceError: Service is not defined

AngularJS - ReferenceError: $ is not defined

Initialize $scope variables for multiple controllers - AngularJS

what is `MyCtrl`? that's not a controller, it's just a random function. Where is it called from? — Claies, Nov 24 '16 at 12:10
that won't work; as I already mentioned, `MyCtrl` isn't a controller. — Claies, Nov 24 '16 at 12:13
Ok - can I only call a service from a controller? Not a function? So to fix it should I put a call into a controller which will then call my service? Or is there a more direct way? — hlh3406, Nov 24 '16 at 12:14
You must be using an older version of Angular if `MyCtrl` is declared this way and actually functions, this declaration style was removed in Angular 1.3. Aside from that, you can't use `systemService` inside that function because it isn't declared, and wasn't injected. — Claies, Nov 24 '16 at 12:16

score 5 · Accepted Answer · answered Nov 24 '16 at 12:14

Your use of defining the MyCtrl is deprecated, you need angular to inject the systemService depedency in order to use it.

Try defining the MyCtrl controller the same way you defined continueController, like this:

    myApp.controller('MyCtrl', ["$scope", 'systemService', function ($scope, systemService) {
        $scope.changeme = function () {
            console.log("Drop down changes ideally do something here....");

            //Call to service  
            $scope.ss = systemService.checkDropDownValue($scope.payment.type, $scope.notApp);

            console.log($scope.ss.field);
            console.log($scope.ss.notAppJ);

        }

        $scope.myFunct = function (keyEvent) {

        if (keyEvent.which === 13) {
            //They hit the enter key so ignore this 
            keyEvent.preventDefault();
        }

        //Becauase a new child scope is generated you can't use $scope as that refers to the parent . But this refers to the child. 
        var rPromise = findAll(this.softwareText);

        }
    }]);

That solved it! Thank you! I'll mark as the correct answer when the time limit runs out! — hlh3406, Nov 24 '16 at 12:16

score 1 · Answer 2 · answered Nov 24 '16 at 12:15

1

MyCtrl shoud provide dependency to systemService with $inject property like

function MyCtrl($scope, systemService) {

}

MyCtrl.$inject = ['$scope', 'systemService']

answered Nov 24 '16 at 12:15

Krzysztof Safjanowski

7,292
3
35
47

AngularJS - Service is not defined error in function but fine in controller - ReferenceError: systemService is not defined

2 Answers2