$rootScope.$broadcast vs. $scope.$emit

by

tl;dr (this tl;dr is from @sp00m‘s answer below)

$emit dispatches an event upwards … $broadcast dispatches an event downwards

Detailed explanation

$rootScope.$emit only lets other $rootScope listeners catch it. This is good when you don’t want every $scope to get it. Mostly a high level communication. Think of it as adults talking to each other in a room so the kids can’t hear them.

$rootScope.$broadcast is a method that lets pretty much everything hear it. This would be the equivalent of parents yelling that dinner is ready so everyone in the house hears it.

$scope.$emit is when you want that $scope and all its parents and $rootScope to hear the event. This is a child whining to their parents at home (but not at a grocery store where other kids can hear).

$scope.$broadcast is for the $scope itself and its children. This is a child whispering to its stuffed animals so their parents can’t hear.

More Related Contents:

  1. How do I use $scope.$watch and $scope.$apply in AngularJS?
  2. AngularJS : Prevent error $digest already in progress when calling $scope.$apply()
  3. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  4. AngularJS access parent scope from child controller
  5. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  6. How do I use $rootScope in Angular to store variables?
  7. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  8. AngularJS access scope from outside js function
  9. How do I inject a controller into another controller in AngularJS
  10. Sending event when AngularJS finished loading
  11. Does my ng-model really need to have a dot to avoid child $scope problems?
  12. Confused about Angularjs transcluded and isolate scopes & bindings
  13. How to call a function from another controller in AngularJS? [duplicate]
  14. How do I ignore the initial load when watching model changes in AngularJS?
  15. Get value when selected ng-option changes
  16. Directive isolate scope with ng-repeat scope in AngularJS
  17. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  18. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  19. AngularJs: Reload page
  20. How to modify scope from within a directive in AngularJs
  21. Call a method of a controller from another controller using ‘scope’ in AngularJS
  22. AngularJS $watch vs $watchCollection: which is better for performance?
  23. Typescript async/await doesnt update AngularJS view
  24. AngularJS – Filter empty objects
  25. Why ng-scope is added to javascript inline of my partial view and makes alert not working?
  26. AngularJS: How to nest applications within an angular app
  27. Binding inputs to an array of primitives using ngRepeat => uneditable inputs
  28. ng-click doesn’t work within the template of a directive
  29. Access Parent Scope in Transcluded Directive
  30. scope and controller instantiation with ui router

Leave a Comment