Calling Angular JS function inside JQuery function not working

Question

I am calling a Angular JS function inside a JQuery function , but it is not working, Can anyone point out the error

Javascript function :-

I have a text field where you can add an employee email address , Based on the added email id the angular js function pulls his full name from Google Directory. In the below function i am trying to concatenate all added employee names to one String. but i am unable to call the angular JS function inside the Jquery function.

     (function( $ ){

       $.fn.multipleInput = function() {

         return this.each(function() {

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


            }

           });

Angular JS function :-

I have created the below function to pull fullname from the google directory. The angular JS function make use of a service and returns the fullname of an employee.

     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){

                    $scope.fullName=item.fullName; 

               return    item.fullName;

               });
            });



          };

$scope.addOne=function(num){ var q=$q.defer() //creates a deferred object which reperesents a task which will finish in the future $scope.step++;

               if(angular.isNumber(num)){
                  setTimeout(function(){q.resolve(num+1)},1000)
                    }else{
                    q.reject('NaN')
                       }
                return q.promise
                }

             $scope.step=0;
             $scope.myValue=0;
             $scope.promise=$scope.addOne($scope.myValue);
             $scope.promise
             .then(function(v){return $scope.addOne(v)})
             .then(function(v){return $scope.addOne(v)})
             .then(function(v){return $scope.addOne(v)})
             .then(function(v){return $scope.addOne(v)})
             .then(
               function(v){$scope.myValue=v},
               function(err){$scope.myValue=err}
                )
        }])

Change angular.element('#theController').scope to angular.element('#theController').scope() — Scottie
– Scottie, Commented Mar 13, 2015 at 13:59

Scottie · Accepted Answer · 2015-03-16 14:37:56Z

1

.scope is a function. You need to change this line:

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

to this:

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

Edited to add: To return an async operation, do this...

$('[ng-controller="theController"]').scope().getFullName($input.val())
    .then(function(fullName) {
        alert(fullname);
     }

$scope.getFullName= function(item) {
    var deferred = $q.defer();

    $http.get('https://myservice/v1/query/'+$label)
        .then(function(response) {
            response.data.items.map(function(item) {
                deferred.resolve(item.fullName); 
            }
        })   

    return deferred.promise;
});

edited Mar 16, 2015 at 14:37

answered Mar 13, 2015 at 14:00

Scottie

11.4k21 gold badges75 silver badges116 bronze badges

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

6 Comments

Bipin Over a year ago

Error Details : Uncaught TypeError: Cannot read property 'getFullName' of undefined

Scottie Over a year ago

What happens if you do Console.log(angular.element('#theController').length);

Bipin Over a year ago

I called the console.log() inside the Jquery function it says Uncaught ReferenceError: Console is not defined

Bipin Over a year ago

Thanks guys it is working now i used var fullname = $('[ng-controller="theController"]').scope().getFullName($input.val());

Bipin Over a year ago

How can i ensure that getFullName() is executed before JQuery moves to next line??

|

Collectives™ on Stack Overflow

Calling Angular JS function inside JQuery function not working

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related