Things to know about $broadcast

The beginners in AngularJS will stop here and have questions like What is $broadcast in angularjs?, What is the use of $broadcast?, How to use?, Why we are using $rootScope for invoking $broadcast?, How to pass parameters when using $broadcast? and How to broadcast between controllers?. So there are many things to know about $broadcast here.

If you understand efficient way of use of broadcast then you can easily reduce your lines of code and you can save your time on AngularJS Web application.

 

What is $broadcast?

It’s a kind of method which Dispatches an event downwards to all child scopes (and their children) notifying the registered scopes listeners. By the term ‘broadcast’ itself we can know that it broadcasting something (dispatching an event) to listeners in one particular direction (only downwards). What is Listeners here? The method $on is the listener here. Finally $broadcast is a powerful means to transfer messages to scopes at a different hierarchical level.

 

What is the use of $broadcast?

Suppose if we want to automatically trigger some event of code to execute on other part of application after finishing some actions/services, then we can go for $broadcast. $broadcast is a convenient way to raise a “global” event which all child scopes can listen for.

The event life cycle starts at the scope on which $broadcast was called. All listeners listening for broadcasted name event on this scope get notified. Afterwards, the event propagates to all direct and indirect scopes of the current scope and calls all registered listeners along the way. The event cannot be canceled once it triggered.

 

Why we are using $rootScope for invoking $broadcast?

It’s a pretty simple answer. You only need to use $rootScope to broadcast the message, since all the descendant scopes can listen for it.

 

How to use?

The root scope broadcasts the event:

$rootScope.$broadcast("NotifyEvent");

Any child Scope can listen for the event:

scope.$on("NotifyEvent",function () {console.log('my event occurred');});

 

How to broadcast between controllers?

angular.module('myApp', [])
   .controller('ParentCtrl', ['$scope', '$rootScope', function($scope) {
        
        $scope.clickFunction = function() {
            // code part of your application
            $rootScope.$broadcast('updated_parent_controller');
        };
    }])
   .controller('ChildCtrl', ['$scope', function($scope) {
        
        $scope.$on("updated_parent_controller", function(event) {
            console.log('I'm from ChildCtrl but triggered from ParentCtrl');
        });
    }
]);

 

How to pass parameters when using $broadcast?

angular.module('myApp', [])
   .controller('ParentCtrl', ['$scope', '$rootScope', function($scope) {
        $scope.message = "Child updated from parent controller";

        $scope.clickFunction = function() {
            // Code part of your application
            $rootScope.$broadcast('updated_parent_controller', $scope.message);
        };
    }])
   .controller('ChildCtrl', ['$scope', function($scope) {
        $scope.message = "Some text in child controller";

        $scope.$on("updated_parent_controller", function(event, message) {
            $scope.message = message;
            console.log($scope.message);
        });
    }
]);

Here consolidated all possible questions related with $broadcast and answered them. If you still have any questions regarding $broadcast, you can ask me. If you have still more information about $broadcast please share with us using comments section.

Follow Poppinsboy on Google+ to get more stuffs like this. LOVE TO SHARE.


 

One thought on “Things to know about $broadcast

Leave a Reply

Your email address will not be published.