AngularJS StyleGuide

Publish and subscribe events

• $scope: Use the $emit and $broadcast methods to trigger events to direct relationship scopes only

  // up the $scope
  $scope.$emit('customEvent', data);
  
  // down the $scope
  $scope.$broadcast('customEvent', data);
  

• $rootScope: Use only $emit as an application-wide event bus and remember to unbind listeners

  // all $rootScope.$on listeners
  $rootScope.$emit('customEvent', data);
  

• Hint: Because the $rootScope is never destroyed, $rootScope.$on listeners aren't either, unlike $scope.$on listeners and will always persist, so they need destroying when the relevant $scope fires the $destroy event

  // call the closure
  var unbind = $rootScope.$on('customEvent'[, callback]);
  $scope.$on('$destroy', unbind);
  

• For multiple $rootScope listeners, use an Object literal and loop each one on the $destroy event to unbind all automatically

  var rootListeners = {
    'customEvent1': $rootScope.$on('customEvent1'[, callback]),
    'customEvent2': $rootScope.$on('customEvent2'[, callback]),
    'customEvent3': $rootScope.$on('customEvent3'[, callback])
  };
  for (var unbind in rootListeners) {
    $scope.$on('$destroy', rootListeners[unbind]);
  }