Sunday 5 June 2016

$emit and $broadcast events in Angular js

In this post we are going to see the flow of events in $emit and $broadcast events in angular js. Generally $broadcast is used to sent the events from top to bottom of the $scope tree, $emit means sending the events from bottom of the tree to the top.





from the above you can understand how the events are travelling in a scope tree.now we can see the sample now to trigger the events in the scope.

First Let we see about the $broadcast 


var app = angular.module('app', []);

app.controller('main'function ($scope,$rootScope) {

    $scope.Title = "Sample Angular Application";

    $scope.changeName = function (newname, oldname) {

        $scope.$broadcast('RecieveNotify', newname, oldname);

        /* To broadcast to sibling we have to use the $rootScope , because sibling is    
           Comes under a parent scope of current scope, parent scope is now $rootScope          
        */
        $rootScope.$broadcast('RecieveNotify', newname, oldname);

    };


});


Now we are going to create a controller which is maps as sibling to the main controller in DOM

app.controller('sibling'function ($scope) {

    $scope.$on('RecieveNotify'function (evt, newname, oldname) {
        console.log('Sibling : Names changes from ' + oldname + ' to ' + newname);
    });

});


Now we are going to create a controller which is maps as child to the main controller in DOM

app.controller('child'function ($scope) {
    $scope.$on('RecieveNotify'function (evt, newname, oldname) {
        console.log('Child : Names changes from ' + oldname + ' to ' + newname);
    });
});





<html>
<head>
    <script src="scripts/angular.min.js" type="text/javascript"></script>
    <script src="scripts/angular-route.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="main">
            <h1>{{Title}}</h1>
            Old Name : <input type="text" ng-model="OName" />
            New Name :<input type="text" ng-model="NName" />
            <input type="button" ng-click="changeName(NName,OName)" value="Change Name" />

            <div ng-controller="child">
            </div>
        </div>
        <div ng-controller="sibling">
        </div>
    </div>
</body>
</html>


In the above example  main is the main controller which have a separate scope, then passing the child as a inner controller for the main, and sibling is the sibling controller. 

Now in this view we have a two text box  in which we are giving the two values , where it is passed as a parameter to the function called change Name when the button is clicked which is named as "Change Nam"

Here from the main controller, we are broadcasting a method name 'RecieveNotify', from the $scope and $rootScope, why we are broadcast from two different scopes, Because if it is broadcast from $scope, it can traverse to child controller, but not to sibling controller, to broadcast the event to siblings whether we have to broadcast from parent scope or from $rootScope. If we broadcast from $rootScope then it reaches all levels scopes.

Here child method is called twice because we are trigger from a $rootScope and $scope.

Output:
****************
Child : Names changes from Rajesh to Krishna
Child : Names changes from Rajesh to Krishna
Sibling : Names changes from Rajesh to Krishna








Now Let we see about $emit
$emit is an Bottom to Top approach ,i.e from Child to Parent scope.. Let we see the sample now.


app.controller('main'function ($scope, $rootScope) {

    $scope.Title = "Sample Angular Application";

    $scope.changeName = function (newname, oldname) {
        $scope.$broadcast('RecieveNotify', newname, oldname);

        /* To broadcast to sibling we have to use the $rootScope , because sibling is comes 
           under a parent scope of current scope, parent scope is now $rootScope          
        */
        $rootScope.$broadcast('RecieveNotify', newname, oldname);
    };



    $scope.$on('RecievefromChild'function (evt, data) {
        console.log('Parent recieves value from child ' + data);
    });



});



app.controller('child'function ($scope) {
    $scope.$on('RecieveNotify'function (evt, newname, oldname) {
        console.log('Child : Names changes from ' + oldname + ' to ' + newname);
    });


    $scope.CallParent = function (parentvalue) {
        $scope.$emit('RecievefromChild', parentvalue);
    };


});



Parent Value :<input type="text" ng-model="Pvalue" />
<input type="button" ng-click="CallParent(Pvalue)" value="Call Parent" />


OUTPUT:
**************
Parent recieves value from child SDF




From this post you can learn how to $emit and $broadcast events in angular js.





No comments:

Post a Comment