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
– Claies, Commented Nov 24, 2016 at 12:10
It's defined in my HTML as <div ng-app="myApp" ng-controller="MyCtrl"> — hlh3406
– hlh3406, Commented Nov 24, 2016 at 12:11
that won't work; as I already mentioned, MyCtrl isn't a controller. — Claies
– Claies, Commented Nov 24, 2016 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
– hlh3406, Commented Nov 24, 2016 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
– Claies, Commented Nov 24, 2016 at 12:16

AlexD · Accepted Answer · 2016-11-24 12:14:21Z

5

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

        }
    }]);

answered Nov 24, 2016 at 12:14

AlexD

4,3306 gold badges42 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hlh3406 Over a year ago

That solved it! Thank you! I'll mark as the correct answer when the time limit runs out!

Krzysztof Safjanowski · Accepted Answer · 2016-11-24 12:15:57Z

1

MyCtrl shoud provide dependency to systemService with $inject property like

function MyCtrl($scope, systemService) {

}

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

answered Nov 24, 2016 at 12:15

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related