Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call angular js function controller from jquery in page

How to call angularjs function or controller from jquery I am new to this angularjs here is my function here i have to pass the var1 and var2 from jquery i have searched many articles but i cant understand. Please help me

<script type="text/javascript">

    function customersController($scope, $http) {
        $http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2")
        .success(function (response) { $scope.names = response; });
    }

like image 288
Tajkumar Avatar asked Mar 29 '15 08:03

Tajkumar


People also ask

How do you call a function in AngularJS?

You can call your angularJS function from javascript or jquery with the help of angular. element().

What is an angular element?

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

How do you call a jQuery function in angular 13?

We can write jQuery code inside the method ngOnInit, To add the action to the button we created in app. component. html, we add a button. click event inside ngOnInit method.

Which service of AngularJS will interact with remote server?

The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.


3 Answers

If I speak general, there can be cases when jQuery use is need in Angularjs app i.e. jQuery plugin is used that isn't available in Angular version.

Every Controller has $scope/this and You can access the scope of an angular element if you have an ID tag attached to the same DOM element as the ng-controller:

the DOM:

<div id="myctrl" ng-controller="MyCtrl"></div>

your controller:

function MyCtrl($scope) {
   $scope.anyFunc = function(var1, var2) {
      // var1, var2 passed from jquery call will be available here
      //do some stuff here
   }
}

in jQuery you do this and it will access that controller and call that function :

angular.element('#myctrl').scope().anyFunc('value1','value2');

Running Sample

angular.module('app', [])
    .controller('MyCtrl', function ($scope) {
    $scope.anyFunc = function (var1, var2) {
        alert("I am var1 = " + var1);
        alert("I am var2 = " + var2);
    };
});

$(function(){

    $("#hit").on("click",function(){
       
          angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE');
    
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div id="myctrl" ng-app='app' ng-controller="MyCtrl">
Call via jQuery
<button id="hit">Call</button>
</div>

Happy Helping!

like image 64
Zeeshan Hassan Memon Avatar answered Oct 26 '22 04:10

Zeeshan Hassan Memon


Both the above answers helped me a lot finally i got the answers

$(function(){

   $("#hit").on("click",function(){

      angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE');

  });

});

function customersController($scope, $http) {
    $scope.anyFunc = function (var1, var2) {
    alert("I am var1 = " + var1);
    alert("I am var2 = " + var2);
$http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2")
    .success(function (response) { $scope.names = response; });
};
   }



 <div id="myctrl" ng-app='' ng-controller="MyCtrl">
 Call via jQuery
 <button id="hit">Call</button>
  </div>
like image 45
Tajkumar Avatar answered Oct 26 '22 03:10

Tajkumar


Try Like this

angular.module('app', [])
    .controller('jqueryCtrl', function ($scope) {
        $scope.callFromJquery = function (data) {
            alert(data);
        };
    });
$(function () {
    $("#press").on("click", function () {
        angular.element($("#jquery")).scope().callFromJquery('I Called You ! Angular !');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div id="jquery" ng-app='app' ng-controller="jqueryCtrl">
Just Press ME
<button id="press">Press ME</button>
</div>
like image 31
Anik Islam Abhi Avatar answered Oct 26 '22 02:10

Anik Islam Abhi