CODEWITHSUNDEEP
javascriptjqueryangularjs
Bipin
Bipin

Reputation: 71

Calling AngularJS function inside jQuery

I am calling an AngularJS function inside a jQuery function, but the execution is not sequential. When I execute this page, the jQuery alert shows first instead of AngularJS alert. How can I confirm that the AngualarJS function has executed? After executing the AngularJS function it should execute the next line on jQuery.

Javascript function :-

    (function( $ ){

      $.fn.multipleInput = function() {

     return this.each(function() {

     angular.element('#theController').scope.getFullName($input.val());
     alert("AFTER ANGULAR JS");


        }

       });

AngularJS function :-

    var bipin=angular.module("ui.bootstrap.demo",['ui.bootstrap']);

    bipin.controller('theController',['$scope','$q','$http','$window',      function($scope,$q,$http,$window){
   $scope.selected = '';
   $scope.email = '';
   $scope.fullName = '';

    $scope.getFullName= function(item) {
          alert();
           return $http.get('https://myservice/v1/query/'+$label)
        .then(function(response){
          return response.data.items.map(function(item){
                 alert("INSDE ANGULAR JS");
                $scope.fullName=item.fullName; 

             return    item.fullName;

           });
        });



      };

Upvotes: 1

Views: 2978

Answers (3)

Cauca
Cauca

Reputation: 402

When you use the alias in controller like 

<div id="ExempleController" ng-controller="ExempleController as ctrl" ng-init="ctrl.AtletaLogado()">

You need call in this way in Jquery:

angular.element($('#ExempleController')).scope().ctrl.AlertFromJquery('PARAM1','PARAM2');

Just register my solution, I hope it helps.

Upvotes: 0

jcubic
jcubic

Reputation: 66590

Scope is jQuery plugin so you need to call it:

angular.element('#theController').scope().getFullName($input.val());

instead of angular.element you can call $.

$('#theController').scope().getFullName($input.val());

Upvotes: 2

RohanJ
RohanJ

Reputation: 261

Thats because $http.get is asynchronous. When you call it, it returns a promise and execution of jquery function continues. When http call returns from server .then function is executed and thats when alert inside would be displayed. But as Tony Barnes said, I think you can implement this in pure Angular. No need to mix the two.

Upvotes: 1

Related Questions