Calling AngularJS function inside jQuery

Question

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;

           });
        });



      };

Why mix angular and jquery? You could build a solution with pure angular. — Tony Barnes
– Tony Barnes, Commented Mar 16, 2015 at 12:41

jcubic · Accepted Answer · 2015-03-16 12:51:24Z

2

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());

answered Mar 16, 2015 at 12:51

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RohanJ · Accepted Answer · 2015-03-16 12:50:27Z

1

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.

answered Mar 16, 2015 at 12:50

RohanJ

2614 silver badges12 bronze badges

Comments

Cauca · Accepted Answer · 2017-08-10 16:43:30Z

0

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.

answered Aug 10, 2017 at 16:43

Cauca

4124 silver badges12 bronze badges

Collectives™ on Stack Overflow

Calling AngularJS function inside jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related