How Can AngularJS Controllers Communicate With Each Other?

AngularJS Controller Cross-Communication

Can one AngularJS controller call another?

Yes, AngularJS provides multiple mechanisms for controllers to communicate with each other.

Sharing a Service

One effective approach is to share a service instance between controllers:

angular.module('MyApp', [])
  .service('SomeDataService', function() {
    // Shared data or methods
  })

function FirstController(SomeDataService) {
  // Use the data service...
}

function SecondController(SomeDataService) {
  // Access the same data service instance
}

Emitting Events on Scope

Another method involves emitting events on the scope:

function FirstController($scope) {
  $scope.$on('someEvent', function(event, args) {
    // Listen for the event
  });
}

function SecondController($scope) {
  $scope.$emit('someEvent', args);
  // Trigger the event
}

Additional Communication Methods

AngularJS also supports:

• Parent-to-Child Controller Communication: Using $scope.$parent
• Child-to-Parent Controller Communication: Using $scope.$parent.$emit()
• Cross-Controller Communication via Root Scope: Using $rootScope.$broadcast() or $rootScope.$emit()
• Custom Event Broadcasting: Using Angular's $broadcast and $on methods within a controller or directive

The above is the detailed content of How Can AngularJS Controllers Communicate With Each Other?. For more information, please follow other related articles on the PHP Chinese website!