Usage of $broadcast(), $emit() And $on() in AngularJS

by

$emit

It dispatches an event name upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $emit was called. The event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.

$broadcast

It dispatches an event name downwards to all child scopes (and their children) and notify to the registered $rootScope.Scope listeners. The event life cycle starts at the scope on which $broadcast was called. All listeners for the event on this scope get notified. Afterwards, the event traverses downwards toward the child scopes and calls all registered listeners along the way. The event cannot be canceled.

$on

It listen on events of a given type. It can catch the event dispatched by $broadcast and $emit.

Visual demo:

Demo working code, visually showing scope tree (parent/child relationship):
http://plnkr.co/edit/am6IDw?p=preview

Demonstrates the method calls:

  $scope.$on('eventEmitedName', function(event, data) ...
  $scope.broadcastEvent
  $scope.emitEvent

More Related Contents:

  1. $location / switching between html5 and hashbang mode / link rewriting
  2. Why mixing interpolation and expressions is bad practice
  3. ng-repeat :filter by single field
  4. How do I use $rootScope in Angular to store variables?
  5. $rootScope.$broadcast vs. $scope.$emit
  6. How to POST binary files with AngularJS (with upload DEMO)
  7. Exists Angularjs code/naming conventions? [closed]
  8. angular-ui-router with requirejs, lazy loading of controller
  9. How can I set a dynamic model name in AngularJS?
  10. How to call a function from another controller in AngularJS? [duplicate]
  11. How to pass data between sibling components without using $scope?
  12. Update scope value when service data is changed
  13. Enable angular-ui tooltip on custom events
  14. Accessing attributes from an AngularJS directive
  15. AngularJS: Upload files using $resource (solution)
  16. How to simulate a drag and drop action in protractor?
  17. Modules and namespace / name collision in AngularJS
  18. RegEx for no whitespace at the beginning and end
  19. AngularJS : The correct way of binding to a service properties
  20. Run a controller function whenever a view is opened/shown
  21. Pass form to directive
  22. how does the binding and digesting work in AngularJS?
  23. Use filter on ng-options to change the value displayed
  24. Typescript async/await doesnt update AngularJS view
  25. How do I enable Webstorm intellisense for AngularJS when writing CoffeeScript
  26. ionic app cannot connect cors enabled server with $http
  27. shuffle array in ng-repeat angular
  28. angularjs getting previous route path
  29. React dependency injection or similar?
  30. Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

Leave a Comment