How to call angular js controller function from jquery on page

Question

How to call angularjs function or controller from jquery I am new to angularjs here is my function here I have to pass var1 and var2 from jquery, I searched a lot of articles, but I can not understand. Please help me

<script type="text/javascript"> function customersController($scope, $http) { $http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2") .success(function (response) { $scope.names = response; }); } 

Answer 1

If I speak at all , there may be times when using jQuery is necessary in an Angularjs ie application, the jQuery plugin is used, which is not available in the Angular version.

Each controller has $ scope / this and you can access the Angular area if you have an ID tag attached to the same DOM element as ng-controller:

DOM:

 <div id="myctrl" ng-controller="MyCtrl"></div> 

your controller:

 function MyCtrl($scope) { $scope.anyFunc = function(var1, var2) { // var1, var2 passed from jquery call will be available here //do some stuff here } } 

in jQuery you will do this and it will access this controller and call this function:

 angular.element('#myctrl').scope().anyFunc('value1','value2'); 

Sample run

 angular.module('app', []) .controller('MyCtrl', function ($scope) { $scope.anyFunc = function (var1, var2) { alert("I am var1 = " + var1); alert("I am var2 = " + var2); }; }); $(function(){ $("#hit").on("click",function(){ angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="myctrl" ng-app='app' ng-controller="MyCtrl"> Call via jQuery <button id="hit">Call</button> </div> 

Happy help!

Answer 2

Both of the above answers helped me, finally I got the answers

 $(function(){ $("#hit").on("click",function(){ angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE'); }); }); function customersController($scope, $http) { $scope.anyFunc = function (var1, var2) { alert("I am var1 = " + var1); alert("I am var2 = " + var2); $http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2") .success(function (response) { $scope.names = response; }); }; } <div id="myctrl" ng-app='' ng-controller="MyCtrl"> Call via jQuery <button id="hit">Call</button> </div> 

Answer 3

Try it like this

 angular.module('app', []) .controller('jqueryCtrl', function ($scope) { $scope.callFromJquery = function (data) { alert(data); }; }); $(function () { $("#press").on("click", function () { angular.element($("#jquery")).scope().callFromJquery('I Called You ! Angular !'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="jquery" ng-app='app' ng-controller="jqueryCtrl"> Just Press ME <button id="press">Press ME</button> </div>