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
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
Share Improve this question edited May 23, 2017 at 11:53 CommunityBot 11 silver badge asked Nov 24, 2016 at 12:05 hlh3406hlh3406 1,3986 gold badges31 silver badges47 bronze badges 7-
what is
MyCtrl? that's not a controller, it's just a random function. Where is it called from? – Claies Commented Nov 24, 2016 at 12:10 -
It's defined in my HTML as
<div ng-app="myApp" ng-controller="MyCtrl">– hlh3406 Commented Nov 24, 2016 at 12:11 -
that won't work; as I already mentioned,
MyCtrlisn't a controller. – 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 Commented Nov 24, 2016 at 12:14
-
1
You must be using an older version of Angular if
MyCtrlis declared this way and actually functions, this declaration style was removed in Angular 1.3. Aside from that, you can't usesystemServiceinside that function because it isn't declared, and wasn't injected. – Claies Commented Nov 24, 2016 at 12:16
2 Answers
Reset to default 5Your 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);
}
}]);
MyCtrl shoud provide dependency to systemService with $inject property like
function MyCtrl($scope, systemService) {
}
MyCtrl.$inject = ['$scope', 'systemService']