CODEWITHSUNDEEP
javascriptangularjs
Michael Mahony
Michael Mahony

Reputation: 1350

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

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.

Upvotes: 0

Views: 52

Answers (2)

frosty
frosty

Reputation: 21762

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

Upvotes: 1

Patrick Motard
Patrick Motard

Reputation: 2660

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.

Upvotes: 0

Related Questions