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

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();

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related