How can I send a message from one controller to another in AngularJS?

Question

I have the following set up:

stApp.controller('AdminTableController', ['$rootScope', '$scope', 'gridService', 
            function ($rootScope, $scope, gridService) {
    $scope.$watch('tableData.$pristine', function (newValue) {
        $rootScope.broadcast("tableDataUpdated", {
            state: page.$pristine
        });
    });
}])

stApp.controller('AdminGridController', ['$rootScope', '$scope', 'gridService',
            function ($rootScope, $scope, gridService) {
    $rootScope.on("tableDataUpdated", function (args) {
        //args.state would have the state.
        alert(args.state);
    });
}])

When I run this code I am getting a message:

Object #<Object> has no method 'on'

Note that I tried this with both $rootScope.on and $scope.on

Actually, you need to use ´$on´ instead of ´on´ and $broadcast instead of broadcast — Deividi Cavarzan
– Deividi Cavarzan, Commented Jul 21, 2013 at 19:12

Community · Accepted Answer · 2017-05-23 12:06:58Z

21

You must have meant $broadcast and $on (rather than broadcast and on), that is:

$rootScope.$broadcast("tableDataUpdated", { state: page.$pristine });
// ...
$rootScope.$on("tableDataUpdated", function (args) {
// ...

It's worth noting that $broadcast is used to delegate events to child or sibling scopes, whereas $emit will bubble events upwards to the scope's parents, hence;

When choosing $broadcast (and not $emit), one should either inject the root scope for tying the $on (as you nicely did) or call $on on the receiver's isolated scope, be it a child scope of the dispatcher.

See this post for elaboration on $emit and $broadcast.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Jul 21, 2013 at 18:45

Eliran Malka

16.4k7 gold badges80 silver badges103 bronze badges

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

Comments

Jake McGuire · Accepted Answer · 2014-08-01 16:12:55Z

7

If the event listener is in a child scope: $scope.$broadcast('MyEvent', args);

If the event listener is in a parent scope: $scope.$emit('MyEvent', args);

You could avoid any confusion by using $broadcast on $rootScope, since $rootScope is the parent of all scopes in an Angular application: $rootScope.$broadcast('MyEvent', args);

Whether you use $emit or $broadcast, the receiving controller listens with $scope.$on('MyEvent', function() {});

edited Aug 1, 2014 at 16:12

answered Apr 18, 2014 at 22:14

Jake McGuire

3042 silver badges4 bronze badges

2 Comments

Peter Drinnan Over a year ago

I think it is the other way around. $emit sends upwards from child scope to parent scope. $broadcast goes from parent to child. See docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit

Jake McGuire Over a year ago

You're absolutely right -- I wrote listener instead of emitter, but I've fixed it here so they're reversed. Thanks!

rajasaur · Accepted Answer · 2013-07-21 18:23:42Z

2

 $rootScope.on("tableDataUpdated", function (args) {
        //args.state would have the state.
        alert(args.state);
    });

should be

 $rootScope.$on("tableDataUpdated", function (args) {
        //args.state would have the state.
        alert(args.state);
    });

answered Jul 21, 2013 at 18:23

rajasaur

5,4902 gold badges29 silver badges23 bronze badges

Comments

0xAX · Accepted Answer · 2013-07-21 18:23:01Z

0

$scope.$emit('MyEvent', args);

from first controller, and receive in second controller:

$scope.$on('MyEvent', function() {});

answered Jul 21, 2013 at 18:23

0xAX

22k26 gold badges123 silver badges211 bronze badges

Collectives™ on Stack Overflow

How can I send a message from one controller to another in AngularJS?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related