CODEWITHSUNDEEP
javascriptangularjs
core
core

Reputation: 33059

Communicating between sibling scopes in Angular

Is this how to correctly communicate between two components that are scope siblings?

  1. Ctrl1 emits event up to parent scope of both Ctrl1 and Ctrl2.
  2. Parent scope listens for emitted event from Ctrl1, then broadcasts another event down to Ctrl2.
  3. Ctrl2 listens for broadcasted event from parent scope.

diagram

Upvotes: 15

Views: 5829

Answers (2)

tymeJV
tymeJV

Reputation: 104775

Well - you don't technically need $emit when communicating up to parent controllers, the child has access. But you do need $broadcast when communicating down to a child scope:

app.controller("parentCtrl", function($scope) {
    $scope.testMe = function() {
        $scope.$broadcast("done"); //transmit to ctrl2
    }
});

app.controller("childCtrl1", function($scope) {
    $scope.testMe(); //call parent
});

app.controller("childCtrl2", function($scope) {
    $scope.$on("done", function() {
        alert("Caught parent event");
    });
});

Upvotes: 6

wmock
wmock

Reputation: 5492

Yes, this is how I communicate between sibling scopes in Angular. Typically I think of Ctrl1 as emitting 'up' to all its descendant scopes and 'on' a parent scope listening to the event, the parent scope broadcasting 'down' to all children scopes. In this case, Ctrl2 should have something set up on 'on' to do something once it hears the event.

As a side note, I've done something similar where I've used the rootScope as a centralized event bus where it listens to different children scope's events and then performs some task or broadcasts down again. The children scopes would then be responsible for simply emitting up to the rootScope.

Upvotes: 7

Related Questions