Calling Angularjs Function from a different javascript/Jquery Function

Question

I have two js files, app.js and datepicker.js. I have nothing to do with the html file here. There is a javascript function called clickApply() in datepicker.js. I want to call another submitDetails() function which is inside the app.js file from the clickApply() function. How to do it?

angular.module('ctrl').controller('MyCtrl', ["$scope","$rootScope", function($scope, $rootScope){
                
$rootScope.submitDetails=function() 
}]);//inside app.js

clickApply: function(e) { //inside datepicker.js
            
             angular.element('#span').on("click",submitDetails());
          
            this.hide();
            this.element.trigger('apply.daterangepicker', this);

        }

i think this may be a duplicate of http://stackoverflow.com/questions/23648458/call-angularjs-function-using-jquery-javascript — Code Pharaoh, Mar 14 '17 at 12:00
If you control the source of the datepicker, I'd pass the `submitDetails` function as a callback to the datepicker and just invoke the callback in the `clickApply` function. — Nikolaj Dam Larsen, Mar 14 '17 at 12:08

score 0 · Answer 1 · answered Mar 14 '17 at 12:08

No one prefer executing the angular functions outside of angular scope. If you want to implement a jQuery or any other external plugin in AngularJS, wrap it in directive and use it.

Below code is used for debugging purpose only.

Change your clickApply function signature to below:

For accessing scope you can use angular.element(element).scope()
For rootScope you can use angular.element('body').scope().$root`

clickApply: function(e) { //inside datepicker.js
  angular.element('#span').on("click", function(e) {
    // if you want to access rootScope
    var rootScope = angular.element('body').scope().$root;
    rootScope.submitDetails();
    
    // if you want to access current scope
    // var scope = angular.element(e.target).scope();
    // scope.submitDetails();
  });
  this.hide();
  this.element.trigger('apply.daterangepicker', this);
}

Calling Angularjs Function from a different javascript/Jquery Function

1 Answers1