CODEWITHSUNDEEP
jqueryangularjs
Bipin
Bipin

Reputation: 71

Calling Angular JS function inside JQuery function not working

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}
                )
        }])

Upvotes: 0

Views: 966

Answers (1)

Scottie
Scottie

Reputation: 11308

.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;
});

Upvotes: 1

Related Questions