Can you access a variable from one scope to another in Angular

Question

I have an Angular.js application that I am building. It is truly my first real Angular.js application, so I am learning real world issues as I go along and how to solve them.

My application is to be used by judges while presiding over hearings in the courtroom. It has the following views:

Calendar Documents Parties

It also has a Preferences screen where they set their default selections for courthouse, courtroom and type of law they normally work in.

My issue is with the preferences screen. I am needing to provide something like this:

<div>
  <div>Civil</div><div></div>
  <div>Courthouse</div><div><--dropdown of courthouses set to their default if selected already--></div>
  <div>Courtroom</div><div><-- dropdown of courtrooms in the selected courthouse. Should only populate and be selectable after courthouse is selected--></div>
</div>

I already have code in another controller that grabs the courtrooms filtered by courthouse and type of law and would like to reuse that here. Is the best way to populate a variable in a factory and then refer to that in any of the controllers? Thus, I might have:

angular.module('DepartmentService', []).factory('DeparrmentService', ['$rootScope', '$route', function ($rootScope, $route) {
    // Do stuff to populate the department here

    return DepartmentService;
}]);

I could then do:

$scope.departments = DepartmentService;

Is that correct or is there another/better way to gain access to these variables across the various controllers in my application?

I know that using global variables at the rootScope is frowned upon, but it seems to me the easiest way would be if I could have a variable that doesn't go away when the page refreshes and is accessible to any controller.

First problem...your services essentially are in your controllers. Move the shared code into a server (as you've already started to do) and re-inject the service into every controller that needs that data. — David L
– David L, Commented Sep 9, 2015 at 20:28
You are correct in thinking that your data should be in a factory/service that is then used in your controllers. — Leo Farmer
– Leo Farmer, Commented Sep 9, 2015 at 20:29

frosty · Accepted Answer · 2015-09-09 21:37:52Z

1

You have a good basic idea. Something like this will be better, as a factory is a singleton. You should also always return promises from your services, where possible.

angular.module('DepartmentService', []).factory('DeparrmentService', ['$rootScope', '$route', '$q', function ($rootScope, $route, $q) {
    var data;
    populateData();

    return {
        getData:getData
    };

    function populateData(){
        //get the data
        data = responseFromServer;
    }

    function getData(params){
        var deferred = $q.defer();
        var filteredData = data.filter(function(d){
            //do filtering here based on the params that you passed. 
        })
        deferred.resolve(filteredData);
        return deferred.promise;
    }
}]);

In your controller you will call it like this:

angular.module('app').controller('MyController', function($scope, DepartmentService){

    DepartmentService.getData({courthouse:"Some Court House"})
        .then(function(filteredDepartments){
            $scope.departments = filteredDepartments;
        })
})

edited Sep 9, 2015 at 21:37

answered Sep 9, 2015 at 20:46

frosty

21.8k8 gold badges58 silver badges78 bronze badges

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

2 Comments

Michael Mahony Over a year ago

Since I will need to filter the department by courthosue and type of law, how do I pass in those parameters to this service? I am guessing that I wrap populateData() in a function that has the parameters and then populateData can accept those parameters?

frosty Over a year ago

Does that help @MichaelMahony?

Patrick Motard · Accepted Answer · 2015-09-09 20:31:10Z

0

I typically store shared code and data access layers in a service/factory. I can then pass those services/factories to any controller that needs the underlying data either by instantiation or by singleton pattern depending on the nature of the model (does it change or have a state vs immutable). This pattern lends itself well to the dependency injection available in angular.

answered Sep 9, 2015 at 20:31

Patrick Motard

2,6602 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Can you access a variable from one scope to another in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related