How to call AngularJS controller function in Jquery?

By Hardik Savani | September 22, 2016 | | 80870 Viewer | Category : Javascript jQuery AngularJS


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....



Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.


We are Recommending you: