Working with scope emit and scope on

Question

How can I send my  scope object from one controller to another using   emit and   on methods   function firstCtrl  scope         scope  emit  someEvent    1 2 3       function secondCtrl  scope         scope  on  someEvent   function mass    console log mass           It doesn t work the way I think it should  How do  emit and  on work

User · Answer

Scope s  can be used to propagate  dispatch event to the scope children or parent    emit - propagates the event to parent   broadcast - propagates the event to children   on - method to listen the events  propagated by  emit and  broadcast   example index html    lt div ng-app  appExample  ng-controller  EventCtrl  gt        Root Parent  scope count    count      lt div gt         lt button ng-click   emit  MyEvent    gt  emit  MyEvent   lt  button gt         lt button ng-click   broadcast  MyEvent    gt  broadcast  MyEvent   lt  button gt  lt br gt         Childrent scope count    count       lt  div gt   lt  div gt    example app js   angular module  appExample        controller  EventCtrl      scope   function  scope       scope count   0     scope  on  MyEvent   function          scope count                 Here u can test code  http   jsfiddle net zp6v0rut 41

User · Answer

Below code shows the two sub-controllers from where the events are        dispatched upwards to parent controller  rootScope      lt body ng-app  App  gt        lt div ng-controller  parentCtrl  gt            lt p gt City     city    lt  p gt           lt p gt  Address     address    lt  p gt            lt div ng-controller  subCtrlOne  gt               lt input type  text  ng-model  city    gt               lt button ng-click  getCity city   gt City     lt  button gt           lt  div gt            lt div ng-controller  subCtrlTwo  gt                lt input type  text  ng-model  address    gt               lt button ng-click  getAddrress address   gt Address     lt  button gt            lt  div gt        lt  div gt    lt  body gt      var App   angular module  App            parent controller App controller  parentCtrl   parentCtrl    parentCtrl  inject      scope     function parentCtrl  scope          scope  on  cityBoom   function events  data             scope city   data                scope  on  addrBoom   function events  data             scope address   data                sub controller one  App controller  subCtrlOne   subCtrlOne    subCtrlOne  inject      scope     function subCtrlOne  scope          scope getCity   function city              scope  emit  cityBoom   city                   sub controller two  App controller  subCtrlTwo   subCtrlTwo    subCtrlTwo  inject      scope     function subCtrlTwo  scope          scope getAddrress   function addr              scope  emit  addrBoom   addr                  http   jsfiddle net shushanthp zp6v0rut

User · Answer

lt  DOCTYPE html gt   lt html gt    lt head gt   lt script src   http   ajax googleapis com ajax libs angularjs 1 3 14 angular min js  gt  lt  script gt   lt script gt  var app   angular module  MyApp       app controller  parentCtrl  function  scope      scope  on  MyEvent  function event data            scope myData   data              app controller  childCtrl  function  scope      scope fireEvent   function        scope  emit  MyEvent   Any Data                lt  script gt   lt  head gt   lt body ng-app  MyApp  gt   lt div ng-controller  parentCtrl  ng-model  myName  gt     myData      lt div ng-controller  childCtrl  gt      lt button ng-click  fireEvent    gt Fire Event lt  button gt    lt  div gt    lt  div gt   lt  body gt   lt  html gt

User · Answer

I would additionally suggest a 4th option as a better alternative to the proposed options by  zbynour    Use  rootScope  emit rather than  rootScope  broadcast regardless of the relationship between trasmitting and receiving controller  That way  the event remains within the set of  rootScope   listeners whereas with  rootScope  broadcast the event propagates to all children scopes  most of which will probably not be listeners of that event anyway  And of course in the receiving controller s end you just use  rootScope  on   For this option you must remember to destroy the controller s rootScope listeners   var unbindEventHandler    rootScope  on  myEvent   myHandler    scope  on   destroy   function        unbindEventHandler

User · Answer

The Easiest way       HTML      lt div ng-app  myApp  ng-controller  myCtrl  gt             lt button ng-click  sendData     gt  Send Data  lt  button gt        lt  div gt       JavaScript        lt script gt          var app   angular module  myApp                app controller  myCtrl   function  scope   rootScope                function sendData  scope                    var arrayData     sam   rumona   cubby                     rootScope  emit  someEvent   arrayData                                      app controller  yourCtrl   function  scope   rootScope                 rootScope  on  someEvent   function event  data                    console log data                                      lt  script gt

User · Answer

You can call a service from your controller that returns a promise and then use it in your controller  And further use  emit or  broadcast to inform other controllers about it   In my case  I had to make http calls through my service  so I did something like this     function ParentController  scope  testService        testService getList            then function data                 scope list   testService list                      finally function                  scope  emit  listFetched                     function ChildController  scope  testService             scope  on  listFetched   function event  data                   use the data accordingly                    and my service looks like this       app service  testService      http   function  http             this list                this getList   function                 return  http get someUrl                   then function response                        if  typeof response data      object                             list   response data results                           return response data                        else                              invalid response                         return  q reject response data                                             function response                           something went wrong                     return  q reject response data

User · Answer

To send  scope object from one controller to another  I will discuss about  rootScope  broadcast and  rootScope  emit here as they are used most   Case 1    rootScope  broadcast -   rootScope  broadcast  myEvent   scope data    Here  myEvent  is event name   rootScope  on  myEvent   function event  data       listener on  myEvent  event    rootScope listener are not destroyed automatically  You need to destroy it using  destroy  It is better to use  scope  on as listeners on  scope are destroyed automatically i e  as soon as  scope is destroyed    scope  on  myEvent   function event  data       Or     var customeEventListener    rootScope  on  myEvent   function event  data            scope  on   destroy   function             customeEventListener            Case 2     rootScope  emit       rootScope  emit  myEvent   scope data        rootScope  on  myEvent   function event  data       scope  on not works   The major difference in  emit and  broadcast is that  rootScope  emit event must be listened using  rootScope  on  because the emitted event never comes down through the scope tree   In this case also you must destroy the listener as in the case of  broadcast   Edit      I prefer not to use  rootScope  broadcast    scope  on but use    rootScope  emit   rootScope  on  The  rootScope  broadcast      scope  on combo can cause serious performance problems  That is   because the event will bubble down through all scopes    Edit 2      The issue addressed in this answer have been resolved in angular js   version 1 2 7   broadcast now avoids bubbling over unregistered scopes   and runs just as fast as  emit

User · Answer

You must use  rootScope to send and capture events between controllers in same app  Inject  rootScope dependency to your controllers  Here is a working example   app controller  firstCtrl   function  scope   rootScope                    function firstCtrl  scope                           rootScope  emit  someEvent    1 2 3                 app controller  secondCtrl   function  scope   rootScope            function secondCtrl  scope                         rootScope  on  someEvent   function event  data    console log data                     Events linked into  scope object just work in the owner controller  Communication between controllers is done via  rootScope or Services

User · Answer

This is my function    rootScope  emit  setTitle   newVal full name     rootScope  on  setTitle   function event  title        if  scope item           scope item name   title      else          scope item    name  title

User · Answer

How can I send my  scope object from one controller to another using   emit and   on methods    You can send any object you want within the hierarchy of your app  including  scope   Here is a quick idea about how broadcast and emit work   Notice the nodes below  all nested within node 3  You use broadcast and emit when you have this scenario   Note  The number of each node in this example is arbitrary  it could easily be the number one  the number two  or even the number 1 348  Each number is just an identifier for this example  The point of this example is to show nesting of Angular controllers directives                    3            ------------                                  -----     ------          1         2            ---   ---   ---  ---                              Check out this tree  How do you answer the following questions   Note  There are other ways to answer these questions  but here we ll discuss broadcast and emit  Also  when reading below text assume each number has it s own file  directive  controller  e x  one js  two js  three js   How does node 1 speak to node 3   In file one js  scope  emit  messageOne   someValue s      In file three js - the uppermost node to all children nodes needed to communicate   scope  on  messageOne   someValue s      How does node 2 speak to node 3   In file two js  scope  emit  messageTwo   someValue s      In file three js - the uppermost node to all children nodes needed to communicate   scope  on  messageTwo   someValue s      How does node 3 speak to node 1 and or node 2   In file three js - the uppermost node to all children nodes needed to communicate   scope  broadcast  messageThree   someValue s      In file one js  amp  amp  two js whichever file you want to catch the message or both   scope  on  messageThree   someValue s      How does node 2 speak to node 1   In file two js  scope  emit  messageTwo   someValue s      In file three js - the uppermost node to all children nodes needed to communicate   scope  on  messageTwo   function  event  data      scope  broadcast   messageTwo   data          In file one js  scope  on  messageTwo   someValue s      HOWEVER     When you have all these nested child nodes trying to communicate like this  you will quickly see many  on s   broadcast s  and  emit s    Here is what I like to do   In the uppermost PARENT NODE   3 in this case       which may be your parent controller     So  in file three js  scope  on  pushChangesToAllNodes   function  event  message      scope  broadcast  message name  message data          Now in any of the child nodes you only need to  emit the message or catch it using  on   NOTE  It is normally quite easy to cross talk in one nested path without using  emit   broadcast  or  on  which means most use cases are for when you are trying to get node 1 to communicate with node 2 or vice versa   How does node 2 speak to node 1   In file two js  scope  emit  pushChangesToAllNodes   sendNewChanges      function sendNewChanges       for some event    return   name   talkToOne   data   1 2 3         In file three js - the uppermost node to all children nodes needed to communicate   We already handled this one remember   In file one js  scope  on  talkToOne   function  event  arrayOfNumbers      arrayOfNumbers forEach function number       console log number               You will still need to use  on with each specific value you want to catch  but now you can create whatever you like in any of the nodes without having to worry about how to get the message across the parent node gap as we catch and broadcast the generic pushChangesToAllNodes   Hope this helps

User · Answer

According to the angularjs event docs the receiving end should be containing arguments with a structure like    params  --  Object  event being the event object containing info on the event  --  Object  args that are passed by the callee  Note that this can only be one so better to send in a dictionary object always    scope  on  fooEvent   function  event  args    console log args      From your code  Also if you are trying to get a shared piece of information to be available accross different controllers there is an another way to achieve that and that is angular services Since the services are singletons information can be stored and fetched across controllers Simply create getter and setter functions in that service  expose these functions  make global variables in the service and use them to store the info

User · Answer

First of all  parent-child scope relation does matter  You have two possibilities to emit some event     broadcast -- dispatches the event downwards to all child scopes   emit -- dispatches the event upwards through the scope hierarchy    I don t know anything about your controllers  scopes  relation  but there are several options    If scope of firstCtrl is parent of the secondCtrl scope  your code should work by replacing  emit by  broadcast in firstCtrl   function firstCtrl  scope         scope  broadcast  someEvent    1 2 3       function secondCtrl  scope         scope  on  someEvent   function event  mass    console log mass          In case there is no parent-child relation between your scopes you can inject  rootScope into the controller and broadcast the event to all child scopes  i e  also secondCtrl    function firstCtrl  rootScope         rootScope  broadcast  someEvent    1 2 3       Finally  when you need to dispatch the event from child controller to scopes upwards you can use  scope  emit  If scope of firstCtrl is parent of the secondCtrl scope   function firstCtrl  scope         scope  on  someEvent   function event  data    console log data          function secondCtrl  scope         scope  emit  someEvent    1 2 3

[javascript] Working with $scope.$emit and $scope.$on

Examples related to javascript

Examples related to angularjs