AngularJS How to call controller function from outside of controller component

Question

How I can call function defined under controller from any place of web page  outside of controller component    It works perfectly when I press  get  button  But I need to call it from outside of div controller  The logic is  by default my div is hidden  Somewhere in navigation menu I press a button and it should show   my div and execute  get  function  How I can achieve this   My web page is    lt div ng-controller  MyController  gt     lt input type  text  ng-model  data firstname  required gt     lt input type  text  ng-model  data lastname  required gt      lt form ng-submit  update    gt  lt input type  submit  value  update  gt  lt  form gt     lt form ng-submit  get    gt  lt input type  submit  value  get  gt  lt  form gt   lt  div gt    My js      function MyController  scope             default data and structure        scope data              firstname     Nicolas            lastname     Cage                   scope get   function               ajax              url    php get data php               type   POST              timeout  10000     10 seconds for getting result  otherwise error             error function     alert  Temporary error  Please try again                    complete  function      unblockUI                 beforeSend  function      blockUI                success  function data               json answer   eval       data                     if  json answer                    scope  apply function                         scope data   json answer                                                           scope update   function           ajax           url    php update data php            type   POST           data   scope data          timeout  10000     10 seconds for getting result  otherwise error          error function     alert  Temporary error  Please try again                 complete  function      unblockUI              beforeSend  function      blockUI             success  function data

User · Answer

I ve found an example on the internet   Some guy wrote this code and worked perfectly  HTML   lt div ng-cloak ng-app  ManagerApp  gt       lt div id  MainWrap  class  container  ng-controller  ManagerCtrl  gt          lt span class  label label-info label-ext  gt Exposing Controller Function outside the module via onClick function call lt  span gt          lt button onClick  ajaxResultPost  Update Name With JOHN   accept  true    gt click me lt  button gt          lt br  gt   lt span class  label label-warning label-ext  ng-bind  customParams data  gt  lt  span gt          lt br  gt   lt span class  label label-warning label-ext  ng-bind  customParams type  gt  lt  span gt          lt br  gt   lt span class  label label-warning label-ext  ng-bind  customParams res  gt  lt  span gt          lt br  gt          lt input type  text  ng-model  sampletext  size  60  gt          lt br  gt       lt  div gt   lt  div gt    JAVASCRIPT  var angularApp   angular module  ManagerApp        angularApp controller  ManagerCtrl      scope   function   scope      scope customParams         scope updateCustomRequest   function  data  type  res         scope customParams data   data       scope customParams type   type       scope customParams res   res       scope sampletext    input text      data              function ajaxResultPost data  type  res        var scope   angular element document getElementById  MainWrap    scope        scope  apply function          scope updateCustomRequest data  type  res               Demo   I did some modifications  see original  font JSfiddle

User · Answer

Here is a way to call controller s function from outside of it     angular element document getElementById  yourControllerElementID    scope   get      where get   is a function from your controller   You can switch   document getElementById  yourControllerElementID       to       yourControllerElementID     If you are using jQuery   Also  if your function means changing anything on your View  you should call   angular element document getElementById  yourControllerElementID    scope    apply      to apply the changes   One more thing  you should note is that scopes are initialized after the page is loaded  so calling methods from outside of scope should always be done after the page is loaded  Else you will not get to the scope at all   UPDATE   With the latest versions of angular  you should use  angular element document getElementById  yourControllerElementID    injector     get   rootScope     And yes  this is  in fact  a bad practice  but sometimes you just need things done quick and dirty

User · Answer

I use to work with  http  when a want to get some information from a resource I do the following   angular module  services value         service  Value   function  http   q     var URL    http   localhost 8080 myWeb rest     var valid   false   return       isValid  valid      getIsValid  function callback           return  http get URL   email     password   cache  false                        success function data               if data      true    valid   true               then callback                    And the code in the controller   angular module  controllers value     services value      controller  ValueController   function  scope  Value         scope obtainValue   function            Value getIsValid function    scope printValue                   scope printValue   function            console log  Do it  and value is   Value isValid             I send to the service what function have to call in the controller

User · Answer

Dmitry s answer works fine  I just made a simple example using the same technique   jsfiddle  http   jsfiddle net o895a8n8 5    lt button onclick  call    gt Call Controller s method from outside lt  button gt   lt div  id  container  ng-app    ng-controller  testController  gt   lt  div gt       function call         var scope   angular element document getElementById  container    scope          scope  apply function            scope msg   scope msg     I am the newly addded message from the outside of the controller               alert scope returnHello        function testController  scope         scope msg    Hello from a controller method         scope returnHello   function             return  scope msg

User · Answer

The solution  angular element document getElementById  ID    scope   get   stopped working for me in angular 1 5 2  Sombody mention in a comment that this doesn t work in 1 4 9 also  I fixed it by storing the scope in a global variable   var scopeHolder  angular module  fooApp   controller  appCtrl   function   scope         scope   function bar            console log  foo                       scopeHolder    scope       call from custom code   scopeHolder bar     if you wants to restrict the scope to only this method  To minimize the exposure of whole scope  use following technique    var scopeHolder  angular module  fooApp   controller  appCtrl   function   scope         scope bar   function            console log  foo                       scopeHolder    scope bar       call from custom code   scopeHolder

User · Answer

It may be worth considering if having your menu without any associated scope is the right way to go   Its not really the angular way   But  if it is the way you need to go  then you can do it by adding the functions to  rootScope and then within those functions using  broadcast to send events  your controller then uses  on to listen for those events   Another thing to consider if you do end up having your menu without a scope is that if you have multiple routes  then all of your controllers will have to have their own upate and get functions    this is assuming you have multiple controllers

User · Answer

I have multiple routes and multiple controllers  so I could not get the accepted answer to work   I found that adding the function to the window works   fooModule controller  fooViewModel   function   scope  fooService   http   q   routeParams   window   location  viewModelHelper   interval         scope initFoo   function                 do angular stuff           var initialize   function               scope initFoo               initialize         window fooreinit   initialize       Then outside the controller  this can be done   function ElsewhereOnThePage         if  typeof fooreinit      function     fooreinit

User · Answer

I would rather include the factory as dependencies on the controllers than inject them with their own line of code  http   jsfiddle net XqDxG 550   myModule factory  mySharedService   function  rootScope        return sharedService    thing  value         function ControllerZero  scope  mySharedService         scope thing   mySharedService thing    ControllerZero  inject      scope    mySharedService

User · Answer

Call Angular Scope function from outside the controller      Simply Use  Body  tag  Don t try confuse using id class   var scope   angular element  body   scope                 scope  apply function     scope YourAngularJSFunction

User · Answer

I am an Ionic framework user and the one I found that would consistently provide the current controller s  scope is   angular element document querySelector  ion-view nav-view  active      scope    I suspect this can be modified to fit most scenarios regardless of framework  or not  by finding the query that will target the specific DOM element s  that are available only during a given controller instance

[angularjs] AngularJS. How to call controller function from outside of controller component

Examples related to angularjs