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

        }

Answer 1

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