How to Call AngularJS Controller Function in JQuery?

By Hardik Savani October 20, 2023 Category : Javascript jQuery Angular

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:

Read Also: AngularJS Filter Change Date Format in Controller 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....

Tags :
Previous

Laravel Response Download File Example
Next

Laravel Image Dimension Validation Rules Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares