How do I call an Angular JS function from outside the controller via Javascript or Jquery?

Question

I am working on a project and using both Jquery and AngularJS. Jquery - primarily for the plugins already available. Angular - for the ease of working on forms and objects and DOM manipulation.

I have a plugin ( https://github.com/VinceG/twitter-bootstrap-wizard) where custom events are defined like - onShow, onFinish, onNext etc. These events get triggered when the user does something.

How do I call an AngularJS function from one of these functions?

Code From Plugin

   $(document).ready(function() {
        $('#rootwizard').bootstrapWizard({
            tabClass: 'nav nav-pills',
            onNext: function(tab, navigation, index) {

               //I want to access the myFunction declared 
                //inside the AngularJS code and pass 'index' to it
            }
      });
    });

AngularJS code

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    $scope.myFunction = function(index) {
        // do something with index
    }
});

mido · Accepted Answer · 2016-01-14 01:20:33Z

2

the simplest way for doing this would be retriving the scope of the controller from some element and then calling it's method like:

var myScope = angular.element($('#someElement')).scope();
myScope.doSomething(); // make sure you also invoke the $scope.$apply() to start the digest process.

But, think first, is this what you really want to do, I find this way bit hacky, also IMO mixing jQuery and Angular is not a good thing in the long run...

answered Jan 14, 2016 at 1:20

mido

25.2k15 gold badges99 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

geeky_monster Over a year ago

Yay! This works. Thanks so much. I know mixing them isn't the best thing to do. But i makes my life a lot simpler as I can have best of both worlds. Thanks again!

charlietfl Over a year ago

Proper way would be initialize plugin within a directive... scope is exposed in directive

errata · Accepted Answer · 2016-01-14 01:30:10Z

0

In ES6 controllers can be defined as standard Classes. If you define them this way it is easy to import and use them outside of angular as well.

class MainController {

  constructor(searchService) {
    this.title = 'Hello World';
  }

  myFunction () {
    // do things...
  } 

  someOtherFunction () {
    // do things...
  }

}
export { MainController }

in app.js (or whatever)

import { someFunction, someOtherFunction } from "web/static/js/MainController";

then you can access it with:

let result = someFunction();

answered Jan 14, 2016 at 1:30

errata

27.4k2 gold badges25 silver badges33 bronze badges

Collectives™ on Stack Overflow

How do I call an Angular JS function from outside the controller via Javascript or Jquery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related