Call angularjs function using jquery javascript

Question

I am trying to call angular function using javascript jQuery  following are the link I found   Call Angular Function with Jquery Call controller function from outside of controller component   I have taken the same steps but getting error in browser console  Uncaught TypeError  Cannot call method  myfunction  of undefined   I have created the fiddle  How to call myfunction function and alert is displayed  Any Idea

User · Answer

One doesn t need to give id for the controller   It can simply called as following  angular element document querySelector   ng-controller  HeaderCtrl      scope   myFunc     Here HeaderCtrl is the controller name defined in your JS

User · Answer

Solution provide in the questions which you linked is correct  Problem with your implementation is that You have not specified the ID of element correctly    Secondly you need to use load event to execute your code  Currently DOM is not loaded hence element is not found thus you are getting error   HTML   lt div id  YourElementId  ng-app  MyModule  ng-controller  MyController  gt      Hi  lt  div gt    JS Code  angular module  MyModule            controller  MyController   function   scope         scope myfunction   function  data            alert  ---    data               window onload   function          angular element document getElementById  YourElementId    scope   myfunction  test        DEMO

User · Answer

Try this   const scope   angular element document getElementById  YourElementId    scope    scope  apply function         scope myfunction  test

User · Answer

You can use following   angular element domElement  scope   to get the current scope for the element  angular element domElement  injector   to get the current app injector  angular element domElement  controller   to get a hold of the ng-controller instance   Hope that might help

User · Answer

Another way is to create functions in global scope  This was necessary for me since it wasn t possible in Angular 1 5 to reach a component s scope   Example    x000D   x000D  angular module  app       component  component     x000D    controller     window   function  window    x000D      var self   this  x000D       x000D      self logg   function     x000D        console log  logging     x000D         x000D       x000D       window angularControllerLogg   self logg  x000D      x000D      x000D                  x000D  window angularControllerLogg    x000D   x000D   x000D

User · Answer

Please check this answer    In angularJS script  scope foo   function         console log  test        window angFoo   function          scope foo         scope  apply                In jQuery if  window angFoo        window angFoo

User · Answer

Your plunker is firing off  angular element document getElementById  MyController    scope   myfunction  test      Before anything is rendered   You can verify that by wrapping it in a timeout  setTimeout function        angular element document getElementById  MyController    scope   myfunction  test           1000     You also need to acutally add an ID to your div    lt div ng-app  MyModule  ng-controller  MyController  id  MyController  gt

[javascript] Call angularjs function using jquery/javascript

Examples related to javascript

Examples related to jquery

Examples related to angularjs