hlh3406 hlh3406 - 15 days ago 4
AngularJS Question

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

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

Answer

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

        }
    }]);