How to call angularjs function or controller from jquery I am new to this angularjs here is my function here i have to pass the var1 and var2 from jquery i have searched many articles but i cant 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; });
}
If I speak general, there can be cases when jQuery use is need in Angularjs app i.e. jQuery plugin is used that isn't available in Angular version.
Every Controller has $scope/this and You can access the scope of an angular element if you have an ID tag attached to the same DOM element as the ng-controller:
the 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 do this and it will access that controller and call that function :
angular.element('#myctrl').scope().anyFunc('value1','value2');
Running Sample
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 Helping!
Both the above answers helped me a lot 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>
Try 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>