AngularJS passing data between controllers - West Wind Technologies Support

HTML, CSS, JavaScript

AngularJS passing data between controllers

AngularJS passing data between controllers
Harvey Mushman
All

Jul 18, 2014 @ 06:19am

I have two or more controllers on a page, each is listing rows and columns from my VFP table. I have an edit button on each row that pops up a modal dialog. Some of the edit fields on the popup combine the data contained in the separate controllers via select dropdown option groups.

I can't seem to figure out how to make controller one know about controller two...?

controller1
rows & columns + edit button

controller2
rows & columns

modal popup
field 1...n where one or more is a <select><option...>list based on the rows in controller2

I suspect it has to do with $injectors but that is only a guess and requires a lot more reading to understand this concept.

Any suggestions would be welcome.

--hm--

Re: AngularJS passing data between controllers
Rick Strahl
Harvey Mushman

4490YLUW3

Jul 18, 2014 @ 04:08pm

Easiest way to do this is to use $scope.$emit() and $scope.$on() to pass messages from one controller to another.

You emit messages with somehting like this in the first controller:


$scope.onCellChange = function () {
      cellService.selectedCell = $scope.selection;            
 
      // Send message to HeaderController            
      $scope.$root.$emit("cellSelected", $scope.selection.CellDefID);
};

Then on the receiving controller you have a method that picks up the message using $on:

$scope.$root.$on("cellSelected", function (e, id) {
    $scope.processing = true; // progress display
            
    cellService.loadQueues(id)
        .success(function(result) {                    
            $scope.queues = result;
        })
        .finally(function() {
            $scope.processing = false;  // stop progress
        });
});

+++ Rick ---

I can't seem to figure out how to make controller one know about controller two...?

controller1
rows & columns + edit button

controller2
rows & columns

modal popup
field 1...n where one or more is a <select><option...>list based on the rows in controller2

I suspect it has to do with $injectors but that is only a guess and requires a lot more reading to understand this concept.

Any suggestions would be welcome.

Rick Strahl
West Wind Technologies

Making waves on the Web
from Maui

Re: AngularJS passing data between controllers
Harvey Mushman
Rick Strahl

44C0KOODP

Jul 21, 2014 @ 09:39am

After almost getting Emit() and On() working across controllers, I discovered if I defined a variable in controller1 at the $scope level and assigned my value to it in controller2, when I needed to access it in controller1 everything worked. So at this point, I can avoid emit() and on() and stay focused on my app.

thanks for this pointer, I'm sure it will come up soon enough. <g>

--hm

Easiest way to do this is to use $scope.$emit() and $scope.$on() to pass messages from one controller to another.

You emit messages with somehting like this in the first controller:


$scope.onCellChange = function () {
      cellService.selectedCell = $scope.selection;            
 
      // Send message to HeaderController            
      $scope.$root.$emit("cellSelected", $scope.selection.CellDefID);
};

Then on the receiving controller you have a method that picks up the message using $on:

$scope.$root.$on("cellSelected", function (e, id) {
    $scope.processing = true; // progress display
            
    cellService.loadQueues(id)
        .success(function(result) {                    
            $scope.queues = result;
        })
        .finally(function() {
            $scope.processing = false;  // stop progress
        });
});

+++ Rick ---

I can't seem to figure out how to make controller one know about controller two...?

controller1
rows & columns + edit button

controller2
rows & columns

modal popup
field 1...n where one or more is a <select><option...>list based on the rows in controller2

I suspect it has to do with $injectors but that is only a guess and requires a lot more reading to understand this concept.

Any suggestions would be welcome.

--hm--

Re: AngularJS passing data between controllers
Rick Strahl
Harvey Mushman

44C0TMMEK

Jul 21, 2014 @ 01:49pm

Not sure what you mean. $scope instances aren't visible to each other unless they are in a hierarchy. Nested child $scopes inherit the parent $scope properties, but sibling or completely unrelated controllers can't see each other's $scope.

For those cases $emit() and $on() are the way to go. It's also not just about getting the value over there - it's also about notifying the other controller that something needs to happen. Since controller code runs only once when activated, you still need a way to notify the other controller typically when a value is updated and the $emit()/$on sequence is a nice way of doing this.

+++ Rick ---

Rick Strahl
West Wind Technologies

Making waves on the Web
from Maui