angular, sharing between controllers (after it's been populated?)

Question

I am trying to share some information between controllers with angular. I know this isn't too hard of a thing to do, I found some great examples here however I have a bit of an odd scenario with how I am bringing in and changing the data I am trying to share. I attempted to apply some other examples I had found to get this to work but could not seem to get this working so I will try to explain as clearly as I can.

The problem

What I am trying to do is pretty straight forward. I have some drop downs values I am trying to share between controllers. So whatever value it has upon landing and has been populated, and when it changes, would be shown in another controller.

The issue is that I have set up a big factory that all the controllers call from to populate their inputs, there are 10 controllers, and each has a bunch of inputs that have to be populated when landing so I have a factory with a $q.all function for each of the $http calls stored in vars, then a .then that calls another call to see if any data is saved and have the defaults changed to the saved values. I would prefer, if possible, to keep this method. I am using it everywhere and it might be a pain to change it.

So the factory looks like :

var criteria1 = $http({method: "GET", url: "/crit1"});
var criteria2 = $http({method: "GET", url: "/crit2"});
var criteria3 = $http({method: "GET", url: "/crit3"});

  return {
 critera: $q.all([criteria1 ,criteria2, criteria3])
 }

In the controller I then do a :

getDefaults.criteria.then(function(data){

//fill out defaults and values for selects with this data

//then get saved data (if any)
$http({
            method: "GET",
            url: "/getsavedData/" + sectionID
        })
        .success(function(data, status, headers, config){
        //if data !null then overrite scopes for defaults
        };

So what I am trying to do is then share the value of 2 select lists on this controller with another. I was provided this example - http://jsfiddle.net/HB7LU/6510/. But I can't seem to figure out how to apply this to what I am doing. Mostly because the data is determined outside of the controller where it needs to be shared from. I am trying to avoid this, but if it is the best way then I should probably change it.

I want the inputs to populate, get defaults, then share the information with controllers (and share when it changes too). It would be ideal if I could do something similar to what 2 way data binding does, but between controllers, so the controller I am feeding to Is always feeding information of the select list answer. I've struggled with this for a bit, it should be easy, I think I am just thinking about it incorrectly. Any direction would be much appreciated. Thanks for taking the time to read!

Why don't you just set the retrieved data onto a public property in a service, and have each interested controller watch that data? — Mohammad Sepahvand, Sep 22 '14 at 15:52
Something like [this](http://stackoverflow.com/questions/21452040/angularjs-sharing-methods-between-controllers/21452417#21452417), but you need to set `var msg=...` to the result of your $q.all(). — Mohammad Sepahvand, Sep 22 '14 at 16:01
Have you considered using $broadcast and $on? [link](https://docs.angularjs.org/api/ng/type/$rootScope.Scope) — David Sung Lee, Sep 22 '14 at 19:07

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

Not sure if this is what you are looking for, but creating a 'Service' and listen for it from the other controllers, might come in handy. Something like that is mentioned here: https://stackoverflow.com/a/19469131/2658127

You can change the <input> to whatever you want.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 22 '14 at 16:22

Rajush

635
6
10

score 0 · Answer 2 · answered Nov 04 '14 at 12:45

You can use events.

Scope Documentation

In this check out $on, $broadcast and $emit.

In general use case the usage of angular.element(catapp).scope() was designed for use outside the angular controllers, like within jquery events.

Ideally in your usage you would write an event in controller 1 as:

$scope.$on("myEvent", function (event, args) {
   $scope.rest_id = args.username;
   $scope.getMainCategories();
});

And in the second controller you'd just do

$scope.initRestId = function(){
   $scope.$broadcast("myEvent", {username: $scope.user.username });
};

Edit: Realised it was communication between two modules

Can you try including the firstApp module as a dependency to the secondApp where you declare the angular.module. That way you can communicate to the other app.

angular, sharing between controllers (after it's been populated?)

2 Answers2