How Do `$scope.$emit` and `$scope.$on` Facilitate Inter-Controller Communication in AngularJS?

Working with $scope.$emit and $scope.$on

In AngularJS, communication between controllers can be achieved using the $scope.$emit and $scope.$on methods. These methods facilitate event-based communication, allowing data or signals to be broadcast from one controller to another.

$scope.$emit and $scope.$on: Explained

• $scope.$emit: Emits an event that is propagated upwards through the scope hierarchy.
• $scope.$on: Listens for an event with a specific name and performs a callback function when the event is triggered.

Parent-Child Scope Relationship Matters

The effectiveness of these methods depends on the parent-child relationship between the scopes of the controllers involved. Two types of event dispatch are available:

• $scope.$broadcast: Dispatches the event downwards to all child scopes.
• $scope.$emit: Dispatches the event upwards through the scope hierarchy.

Example Scenarios

1. Parent-Child Scope Relationship:

If the scope of the first controller ($scope.$emit) is a parent of the second controller ($scope.$on), the following code should work:

function firstCtrl($scope) {
    $scope.$broadcast('someEvent', [1, 2, 3]);
}

function secondCtrl($scope) {
    $scope.$on('someEvent', function(event, mass) {
        console.log(mass);
    });
}

2. No Parent-Child Scope Relationship:

If there is no parent-child relationship, you can inject $rootScope into the controller and broadcast the event to all child scopes:

function firstCtrl($rootScope) {
    $rootScope.$broadcast('someEvent', [1, 2, 3]);
}

3. Dispatching from Child to Parent:

To dispatch an event from a child controller to a parent controller, use $scope.$emit. If the scope of the first controller ($scope.$on) is a parent of the second controller ($scope.$emit):

function firstCtrl($scope) {
    $scope.$on('someEvent', function(event, data) {
        console.log(data);
    });
}

function secondCtrl($scope) {
    $scope.$emit('someEvent', [1, 2, 3]);
}

By understanding how $scope.$emit and $scope.$on work, you can effectively communicate between controllers in your AngularJS applications.

The above is the detailed content of How Do `$scope.$emit` and `$scope.$on` Facilitate Inter-Controller Communication in AngularJS?. For more information, please follow other related articles on the PHP Chinese website!