How to Call AngularJS Controller Function in JQuery?
Today, i am going to show you how to call angular function in your js file. Sometimes we need to call angular controller function in our jquery code because we can make single function in all project.
It is very simple post but it important because many times we require to call angularjs function from jquery.
So, i given bellow example will help you how to call angularjs function in jquery. It is from scratch that way you can simply understand.
In this example i created one function "$scope.makeAlert()" In my AngularJS controller. This function have one argument that way we can also pass argument. When you click on button i use id of controller element and use with angular element, then simple use scope helper and at last function name with argument as bellow example.
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to call AngularJS controller function in Jquery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="myController" id="mainController">
<button>Click Here</button>
</div>
<script type="text/javascript">
var mainApp = angular.module("mainApp", []);
mainApp.controller('myController', function($scope, $timeout) {
$scope.makeAlert = function(arg) {
alert(arg);
}
});
</script>
<script type="text/javascript">
$("button").click(function(){
angular.element(document.getElementById('mainController')).scope().makeAlert('This is for Test');
});
</script>
</body>
</html>
So, you can check this one, Maybe it can help you....
