angular

How to call angular function in jquery

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.

Ex:

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

Leave a comment

Your email address will not be published. Required fields are marked *