How To Call An Angularjs Service Using Jquery

By Rahul Kumar Jha | Jun 26, 2015 | In Tips | Update: Jun 29, 2015 | Total Views [ 34860 ]

Yous tin can telephone call your angularJS function from javascript or jquery with the help of angular.chemical element(). In this article I will explain this with a simple short example.

Introduction

Many fourth dimension information technology may happens that you demand to telephone call a method created in angularJS in javascrip/jquery office cake. 1 scenario tin exist that you are using angularJS in your MVC awarding and y'all are making an ajax call and OnSuccess() event y'all need to call an angularJS method into your javascript lawmaking block. Don't go on my words. Information technology is not so tough equally I am trying to make information technology. You can practise this using 1 line of code calling angularJS scope into your javascript cake. Let'south come across how can nosotros do this with a brusque example.

Angular JS Controller

Below is the simple angularJS controller where I accept created a simple part which will open an alert box.

var app;(part () {
    app = angular.module("TestApp", []);
})();
            app.controller('TestController', ["$telescopic", function ($scope) {
    $scope.TestAngularMethod = office () {
        alarm('Hello you are calling athwart js method.');
    }
}]);

HTML

Copy below html code.

        <div course="margin-bottom width100floatleft" ng-app="TestApp" ng-controller="TestController" id="divID">
            This is examination div. Click the button to phone call javascript function            
        <bridge manner="edge:1px solid black; edge-radius:5px; padding:10px;" onclick="OnSuccessData()">Click Me</span>
        </div>

Javascript

Re-create below javascript code.

    <script type="text/javascript">
        office OnSuccessData() {
            angular.element(document.getElementById('divID')).telescopic().TestAngularMethod();
        }
    </script>

If you noticed in javascript code, I am using angularJS scope of TestController and calling TestAngularMethod() from hither. This line will let you to use your angularJS controller telescopic into javascript also. This was the simple trick I used to call angularJS role into my javascript part. Hope it can aid yous.

About the Author

Rahul Kumar Jha

Has working experience in unlike phases of Software Development Life Bicycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Active pattern. Working experience in Blueprint patterns, ASP.NET, MVC, ANGULAR, ANGULAR JS, Windows application, WCF, ADO.Cyberspace, SQL Server and Test Driven Development (TDD) surroundings with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.