Communicating Between Sibling Scopes In Angular

Is this how to correctly communicate between two components that are scope siblings? Ctrl1 emits event up to parent scope of both Ctrl1 and Ctrl2. Parent scope listens for emitted

Solution 1:

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.

Solution 2:

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