Using globals in angularjs

Question

I am trying to use global variables from one file in another file. I have it working from the original file(controller.js) into the html file but I cant not get it working from the controller.js to the service.js.

I am rather new at angular and trying to figure this out.

Without code and a clear description of the problem, it's impossible to answer. But you should not do that anyway. globals are evil. Use what Angular provides to share information between components: services. — JB Nizet
– JB Nizet, Commented May 2, 2016 at 15:12
I know globals are evil. I try to avoid them at all cost. But what I am trying to do is call a function from the server and based on the information that I get back I want to show or hide some ion-item. I am using ng-show to get it working from the Controller.js file but I would like to call the function from services.js. What is the best way to accomplish this with out globals — Duncan C. Henke
– Duncan C. Henke, Commented May 2, 2016 at 15:18
From the angularJS tutorial docs.angularjs.org/tutorial/step_05 — Amy Blankenship
– Amy Blankenship, Commented May 2, 2016 at 15:21
Or a more succinct example: stackoverflow.com/a/16227770/4682556 — Dan
– Dan, Commented May 2, 2016 at 15:22

Community · Accepted Answer · 2017-05-23 11:53:01Z

3

It seems you want to declare a variable in your controller so that your service can write data to that variable. You need to think about it the other way around, passing the service to your controller through dependency injection

app.controller('homeCtrl', function($scope, myServiceIsNowInjected){

})

and then calling a method on that service in the controller:

myServiceIsNowInjected.getDataFromServer('my param');

You will then encounter the problem that getting data from a server is asynchronous, so you need use angular promises so that you can assign the result to a variable on your scope when the data is received. The above, still in your controller will become:

myServiceIsNowInjected.getDataFromServer('my param').then(function(data){
  $scope.viewvar = data;       
}, function(err){ console.log(err) });

In this way, rather than passing a global variable to the service for the service to write the data to that variable, instead you ask the service to perform some task, and have the controller write the result of that task to the $scope, making it available to the view.

A full solution example of exactly this is available as mentioned here.

$rootScope should not be used for this kind of thing - it will cause you problems as your application grows, whereas using modular controllers which pull information from services will not.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered May 2, 2016 at 15:54

Dan

3,07021 silver badges38 bronze badges

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

1 Comment

Duncan C. Henke Over a year ago

Thank you this is exactly what I was looking for.

Joaquín Crippa · Accepted Answer · 2016-05-02 15:21:38Z

0

One option is to use the $rootScope.

In a controller you define:

$rootScope.variable = 'your value';

And then, in a service or another controller you use it:

Console.log($rootScope.variable);

Remember inject the $rootScope (like you make with $scope) in the controllers/services definition.

answered May 2, 2016 at 15:21

Joaquín Crippa

3111 silver badge5 bronze badges

6 Comments

Duncan C. Henke Over a year ago

when you say to inject you mean something like this function GetWebsiteSetting($scope, resp, $rootScope){

Joaquín Crippa Over a year ago

Where you define the controller: angular.module('app.controllers', []) .controller('TestCtrl', function($scope, $rootScope) { ... });

Duncan C. Henke Over a year ago

ok yes I have done this. my controller looks like this now. .controller("StartpageCtrl", function($rootScope, $scope){ $scope.showstartCard = true; $rootScope.variable = "your variable"; }); and in my service side it is saying cant find variable of undefined

Joaquín Crippa Over a year ago

Are you defining the controller before the service? Pay attention to the order!

Duncan C. Henke Over a year ago

I just checked my order by setting up 2 break points and the contoller.js is being hit first. I alsot did this function Failed($scope, resp, $rootScope){ $rootScope.variable = false; console.log("Get Website Setting Failed: " + $rootScope.variable); } and it still is returning variable is undefined.

|

Collectives™ on Stack Overflow

Using globals in angularjs

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest