MOCKSTACKS
EN
Questions And Answers

More Tutorials









Angular Events


$scope.$emit

Using $scope.$emit will fire an event name upwards through the scope hierarchy and notify to the $scope.The event life cycle starts at the scope on which $emit was called.

Working wireframe :

$scope.$broadcast


Using $scope.$broadcast will fire an event down the $scope. We can listen of these events using $scope.$on Working wireframe :

Syntax :
// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');
// firing an event downwards
$scope.$broadcast('myCustomEvent', {
 someProp: 'some value'
});
// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data) {
 console.log(data); // 'Data from the event'
});


Instead of $scope you can use $rootScope, in that case your event will be available in all the controllers regardless of that controllers scope

Clean registered event in AngularJS

The reason to clean the registered events because even the controller has been destroyed the handling of registered event are still alive. So the code will run as unexpected for sure.

// firing an event upwards
$rootScope.$emit('myEvent', 'Data to send');
// listening an event
var listenerEventHandler = $rootScope.$on('myEvent', function(){
 //handle code
});
$scope.$on('$destroy', function() {
 listenerEventHandler();
});

Always deregister $rootScope.$on listeners on the scope $destory event


$rootScope.$on listeners will remain in memory if you navigate to another controller. This will create a memory leak if the controller falls out of scope.
Don't

angular.module('app').controller('badExampleController', badExample);
badExample.$inject = ['$scope', '$rootScope'];
function badExample($scope, $rootScope) {
 $rootScope.$on('post:created', function postCreated(event, data) {});
}

Do

angular.module('app').controller('goodExampleController', goodExample);
goodExample.$inject = ['$scope', '$rootScope'];
function goodExample($scope, $rootScope) {
 var deregister = $rootScope.$on('post:created', function postCreated(event, data) {});
 $scope.$on('$destroy', function destroyScope() {
 deregister();
 });
}



Conclusion

In this page (written and validated by ) you learned about AngularJS Events . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Sharing Data.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.