Call a method of a controller from another controller using scope in AngularJS

Question

I am trying to call a method of second controller in first controller by using scope variable  This is a method in my first controller    scope initRestId   function            var catapp   document getElementById  SecondApp            var catscope   angular element catapp  scope            catscope rest id    scope user username          catscope getMainCategories              I am able to set the value of rest id but I cannot call getMainCategories for some reason  The console shows this error      TypeError  Object   has no method  getMainCategories    Is there a way to call the above method   Edit   I used the following approach to load two apps at the same time   angular bootstrap document getElementById  firstAppID      firstApp     angular bootstrap document getElementById  secondAppID      secondApp       I could definitely use a service here  but I wanted to know if there are any other options to do the same

User · Answer

Each controller has it s own scope s  so that s causing your issue     Having two controllers that want access to the same data is a classic sign that you want a service   The angular team recommends thin controllers that are just glue between views and services   And specifically-  services should hold shared state across controllers    Happily  there s a nice 15-minute video describing exactly this  controller communication via services    video  One of the original author s of Angular  Misko Hevery  discusses this recommendation  of using services in this situation  in his talk entitled Angular Best Practices  skip to 28 08 for this topic  although  I very highly recommended watching the whole talk    You can use events  but they are designed just for communication between two parties that want to be decoupled   In the above video  Misko notes how they can make your app more fragile    Most of the time injecting services and doing direct communication is preferred and more robust     Check out the above link starting at 53 37 to hear him talk about this

User · Answer

Here is good Demo in Fiddle how to use shared service in directive and other controllers through  scope  on  HTML   lt div ng-controller  ControllerZero  gt       lt input ng-model  message   gt       lt button ng-click  handleClick message    gt BROADCAST lt  button gt   lt  div gt    lt div ng-controller  ControllerOne  gt       lt input ng-model  message   gt   lt  div gt    lt div ng-controller  ControllerTwo  gt       lt input ng-model  message   gt   lt  div gt    lt my-component ng-model  message  gt  lt  my-component gt    JS  var myModule   angular module  myModule         myModule factory  mySharedService   function  rootScope        var sharedService            sharedService message            sharedService prepForBroadcast   function msg            this message   msg          this broadcastItem                sharedService broadcastItem   function              rootScope  broadcast  handleBroadcast                return sharedService        By the same way we can use shared service in directive  We can implement controller section into directive and use  scope  on  myModule directive  myComponent   function mySharedService        return           restrict   E           controller  function  scope   attrs  mySharedService                 scope  on  handleBroadcast   function                      scope message    Directive      mySharedService message                                     replace  true          template    lt input gt                And here three our controllers where ControllerZero used as trigger to invoke prepForBroadcast  function ControllerZero  scope  sharedService         scope handleClick   function msg            sharedService prepForBroadcast msg                scope  on  handleBroadcast   function              scope message   sharedService message             function ControllerOne  scope  sharedService         scope  on  handleBroadcast   function              scope message    ONE      sharedService message             function ControllerTwo  scope  sharedService         scope  on  handleBroadcast   function              scope message    TWO      sharedService message              The ControllerOne and ControllerTwo listen message change by using  scope  on handler

User · Answer

The best approach for you to communicate between the two controllers is to use events   Scope Documentation  In this check out  on   broadcast and  emit   In general use case the usage of angular element catapp  scope   was designed for use outside the angular controllers  like within jquery events   Ideally in your usage you would write an event in controller 1 as    scope  on  myEvent   function  event  args        scope rest id   args username      scope getMainCategories          And in the second controller you d just do   scope initRestId   function        scope  broadcast  myEvent    username   scope user username          Edit  Realised it was communication between two modules  Can you try including the firstApp module as a dependency to the secondApp where you declare the angular module  That way you can communicate to the other app

[angularjs] Call a method of a controller from another controller using 'scope' in AngularJS

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-scope