How $scope.$broadcast() and $scope.$emit() work?

In AngularJS, $scope.$broadcast() and $scope.$emit() are used for event propagation between different scopes in the application. These methods allow child and parent controllers to communicate efficiently.

---

What is $scope.$broadcast()?

$scope.$broadcast() is used to send an event from a parent scope downwards to all its child scopes.

How it Works?

• Event travels downward in the $scope hierarchy.
• Only child scopes receive the event.
• Each child scope must listen using $scope.$on().

Example of $scope.$broadcast()

Parent Controller:

app.controller("ParentController", function($scope) {
    $scope.sendMessage = function() {
        $scope.$broadcast("customEvent", { message: "Hello from Parent!" });
    };
});

Child Controller:

app.controller("ChildController", function($scope) {
    $scope.$on("customEvent", function(event, data) {
        console.log("Child Received:", data.message);
    });
});

HTML:

<div ng-controller="ParentController">
    <button ng-click="sendMessage()">Broadcast Message</button>
    <div ng-controller="ChildController"></div>
</div>

Output: "Child Received: Hello from Parent!"
Key Point: The event is not received by the parent.

---

What is $scope.$emit()?

$scope.$emit() is used to send an event from a child scope upwards to its parent scopes.

How it Works?

• Event travels upward in the $scope hierarchy.
• Only parent scopes receive the event.
• Each parent scope must listen using $scope.$on().

Example of $scope.$emit()

Child Controller:

app.controller("ChildController", function($scope) {
    $scope.sendMessage = function() {
        $scope.$emit("customEvent", { message: "Hello from Child!" });
    };
});

Parent Controller:

app.controller("ParentController", function($scope) {
    $scope.$on("customEvent", function(event, data) {
        console.log("Parent Received:", data.message);
    });
});

HTML:

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <button ng-click="sendMessage()">Emit Message</button>
    </div>
</div>

Output: "Parent Received: Hello from Child!"
Key Point: The event does not reach child controllers.

---

Key Differences Between $broadcast() and $emit()

Feature	$broadcast()	$emit()
Direction	Downward (to child scopes)	Upward (to parent scopes)
Who Receives?	Child controllers	Parent controllers
Performance	More expensive (affects all child scopes)	More efficient (affects only parents)
Use Case	Notify child components (e.g., update UI elements)	Notify parent components (e.g., log data)

---

When to Use $broadcast() and $emit()?

Use $broadcast() when a parent needs to send data to all child controllers.
Use $emit() when a child needs to notify its parent about an event.

---

Alternative Approach: Using $rootScope.$broadcast()

If you need global event communication across unrelated controllers, you can use $rootScope.$broadcast().

app.controller("ControllerA", function($rootScope) {
    $rootScope.$broadcast("globalEvent", { message: "Hello from A!" });
});
app.controller("ControllerB", function($scope) {
    $scope.$on("globalEvent", function(event, data) {
        console.log("Controller B received:", data.message);
    });
});

Works across all controllers, but use carefully to avoid performance issues.