{"id":20455,"date":"2015-06-01T18:33:00","date_gmt":"2015-06-01T13:03:00","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=20455"},"modified":"2017-08-03T15:52:44","modified_gmt":"2017-08-03T10:22:44","slug":"scope-event-propagation-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/scope-event-propagation-in-angularjs\/","title":{"rendered":"Scope Event propagation in AngularJS"},"content":{"rendered":"<p><a title=\"Frontend Interfaces with AngularJS \" href=\"http:\/\/www.tothenew.com\/blog\/building-intuitive-frontend-interfaces-with-angularjs\/\">Angular provides a very powerful<\/a> means to transfer messages to scopes at different hierarchical level. We can dispatch an event upwards through the scope hierarchy by notifying all the registered &#8220;$rootScope.Scope&#8221; listeners in the hierarchy or downwards to all the child scopes.<\/p>\n<p><a title=\"Angular Development\" href=\"http:\/\/www.tothenew.com\/front-end-angularjs-development\">Angular<\/a> provides these two functions to achieve the event propagation in a hierarchical manner:<\/p>\n<ul>\n<li type=\"circle\">$emit &#8211; To propagate events upwards in the hierarchy<\/li>\n<li type=\"circle\">$broadcast &#8211; To propagate events downwards in the hierarchy<\/li>\n<\/ul>\n<p>Lets have a look at how these functions work:<\/p>\n<ol>\n<ol>\n<li>\n<h3>$emit<\/h3>\n<p>It dispatches an event upwards through the scope hierarchy. The event life cycle starts at the scope on which &#8220;$emit&#8221; was called. Afterwards, the event traverses upwards towards the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.<\/p>\n<ul>\n<li><strong>Creating event &#8220;countClickEvent&#8221;<\/strong>\n<p>[java]<br \/>\nvar myApp = angular.module(&#8216;myApp&#8217;, []);<br \/>\n\tmyApp.controller(&#8216;TestController&#8217;, [&#8216;$scope&#8217;, function($scope) {<br \/>\n\t\t$scope.clickCount = 0;<br \/>\n\t\t$scope.$on(&#8216;countClickEvent&#8217;, function() {<br \/>\n\t\t\t$scope.clickCount++;<br \/>\n\t\t});<br \/>\n}]);<br \/>\n[\/java]<\/p>\n<\/li>\n<li><strong>Emit event from DOM<\/strong>\n<p>[html]<br \/>\n&lt;div ng-controller=&quot;TestController&quot;&gt;<br \/>\n\tRoot scope click count : {{clickCount}}<br \/>\n\t&lt;div ng-controller=&quot;TestController&quot;&gt;<br \/>\n    \t&lt;button ng-click=&quot;$emit(&#8216;countClickEvent&#8217;)&quot;&gt;Click to emit event&lt;\/button&gt;<br \/>\n\t\t&lt;br&gt;<br \/>\n\t\tMiddle scope click count : {{clickCount}}<\/p>\n<p>      \t&lt;div ng-controller=&quot;TestController&quot;&gt;<br \/>\n        \tChild scope click count : {{clickCount}}<br \/>\n      \t&lt;\/div&gt;<br \/>\n    &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n[\/html]<\/p>\n<\/li>\n<\/ul>\n<p>In the above example, values of current scope and root scope gets modified but the value of children scope does not change because the &#8220;countClickEvent&#8221; event (in this case) got broadcasted from current scope and got propagated to the root scope only; and not to the children scope.<\/li>\n<li>\n<h3>$broadcast<\/h3>\n<p>It dispatches an event to all the child scopes and their children scopes. The event life cycle starts at the scope on which &#8220;$broadcast&#8221; was called. All listeners listening for named event on this scope get notified. Afterwards, the event traverses downwards towards the child scopes and calls all registered listeners along the way. The event cannot be canceled.<\/p>\n<ul>\n<li><strong>Creating event &#8220;countClickEvent&#8221;<\/strong>\n<p>[java]<br \/>\nvar myApp = angular.module(&#8216;myApp&#8217;, []);<br \/>\n\tmyApp.controller(&#8216;TestController&#8217;, [&#8216;$scope&#8217;, function($scope) {<br \/>\n\t\t$scope.clickCount = 0;<br \/>\n\t\t$scope.$on(&#8216;countClickEvent&#8217;, function() {<br \/>\n\t\t\t$scope.clickCount++;<br \/>\n\t\t});<br \/>\n}]);<br \/>\n[\/java]<\/p>\n<\/li>\n<li><strong>Broadcast event from DOM<\/strong>\n<p>[html]<br \/>\n&lt;div ng-controller=&quot;TestController&quot;&gt;<br \/>\n\tRoot scope click count : {{clickCount}}<br \/>\n\t&lt;div ng-controller=&quot;TestController&quot;&gt;<br \/>\n    \t&lt;button ng-click=&quot;$broadcast(&#8216;countClickEvent&#8217;)&quot;&gt;Click to broadcast event&lt;\/button&gt;<br \/>\n\t\t&lt;br&gt;<br \/>\n\t\tCurrent scope click count : {{clickCount}}<\/p>\n<p>      \t&lt;div ng-controller=&quot;TestController&quot;&gt;<br \/>\n        \tChild scope click count : {{clickCount}}<br \/>\n      \t&lt;\/div&gt;<br \/>\n    &lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n[\/html]<\/p>\n<\/li>\n<\/ul>\n<p>In the above example, values of current scope and child scope gets modified but the value of root scope does not change because the &#8220;countClickEvent&#8221; event (in this case) got broadcasted from current scope and got propagated to the children scope only; and not to the root scope.<\/li>\n<\/ol>\n<\/ol>\n<p><strong>Note: siblings scope are not affected by both functions.<\/strong><\/p>\n<p>Hope this helps !!!<\/p>\n<p><span style=\"font-size: 20px; color: blue;\">Read Further on AngularJS Series<\/span><\/p>\n<ul>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-a-write-less-do-more-javascript-framework\/\">AngularJS :\u00a0A \u201cWrite Less Do More\u201d JavaScript Framework<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-updating-a-label-dynamically-with-user-input\/\">AngularJS :\u00a0Updating a Label Dynamically with User Input<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-adding-items-to-a-javascript-list-and-updating-corresponding-dom-dynamically\/\">AngularJS :\u00a0Adding Items to a JavaScript List and updating corresponding DOM Dynamically<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-text-suggestions\/\">AngularJS :\u00a0Text Suggestions<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-sorting-objects-on-various-attributes\/\">AngularJS :\u00a0Sorting objects on various attributes<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-fetching-data-from-the-server\/\">AngularJS :\u00a0Fetching data from the server<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-multiple-views-layout-template-and-routing\/\">AngularJS :\u00a0Multiple Views, Layout\u00a0Template\u00a0and Routing<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/angularjs-implementing-routes-and-multiple-views\/\">AngularJS :\u00a0Implementing Routes And Multiple Views<\/a><\/li>\n<li><a href=\"http:\/\/www.tothenew.com\/blog\/building-intuitive-frontend-interfaces-with-angularjs\/\">Building Intuitive Frontend Interfaces with AngularJS<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Angular provides a very powerful means to transfer messages to scopes at different hierarchical level. We can dispatch an event upwards through the scope hierarchy by notifying all the registered &#8220;$rootScope.Scope&#8221; listeners in the hierarchy or downwards to all the child scopes. Angular provides these two functions to achieve the event propagation in a hierarchical [&hellip;]<\/p>\n","protected":false},"author":103,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":15},"categories":[1439,3429],"tags":[3955,1186,955,4697,1824,1825,1300,1826],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20455"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=20455"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/20455\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=20455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=20455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=20455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}