Как позвонить ajax из службы в AngularJS?

Question

У меня есть контроллер Employee, который имеет свойство Id, Name, Specification. Я сделал один сервис Employee, который имеет ajax-вызов и получает список сотрудников. Но каждый раз, когда вы получаете '' в User. Когда я отлаживаю код, я обнаружил, что он сначала вызывает успех, а затем идет для вызова Ajax. Когда я делаю вызов ajax без обслуживания, он работает нормально.

angular.module('EmployeeServiceModule', []) 
.service('EmployeeSer', ['$http',function ($http) { 
    this.Users = ''; 
    this.errors = ''; 
    this.SearchEmployee = function() { 
// Ajax call 
     $http({ 
      method: 'GET', 
      url: '/Home/GetEmployeeList', 
      params: { filterData: 'Test' }, 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }).then(onSuccess, onError); 

     var onSuccess = function (response) { 
      this.userUsers = response.data; 
      this.errors = ''; 
     }; 

     var onError = function (reason) { 
      this.userUsers = reason; 
      this.errors = "Error in retrieving data."; 
     }; 

     return this.Users; 
    } 
}]); 


angular.module('Employee', ['EmployeeServiceModule']) 
.controller('EmployeeController', ['EmployeeSer', '$scope', '$http', function (EmployeeSer, $scope, $http) { 

    this.Id = ''; 
    this.name = ''; 
    this.expertise = ''; 
    $scope.repoSortOrder = 'id'; 
    $scope.filterField = ''; 

    // Call to service 
    this.GetAllEmployee = function() { 
     // Initiates the AJAX call 
     $scope.User = EmployeeSer.SearchEmployee(); 
     // Returns the promise - Contains result once request completes 
     return true; 
    }; 

    this.AddEmployee = function() { 
     var empData = { 
      Id: $("#txtId").val(), 
      Name: $("#txtName").val(), 
      Expertise: $("#expertise").val() 
     }; 

     $http({ 
      method: 'POST', 
      url: '/Home/Create', 
      params: JSON.stringify(empData), 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
     }).then(onSuccess, onError); 
     // Returns the promise - Contains result once request completes 
     return true; 
    }; 

    var onSuccess = function (response) { 
     $scope.user = response.data; 
     $scope.error = ''; 
    }; 

    var onError = function (reason) { 
     $scope.error = "Error in retrieving data."; 
    }; 

}]); 

Answer 1

Это потому, что вы возвращаете пользователей до того, как данные извлекаются с сервера. Также не похоже, что вы правильно их назначаете.

Вот два пути решения проблемы:

Во-первых. Вы привязываете данные пользователя контроллера к пользовательским данным в службе.

angular.module('EmployeeServiceModule', []) 
     .service('EmployeeSer', ['$http',function ($http) { 
      this.Users = ''; 
      this.errors = ''; 
      $http({ 
      method: 'GET', 
      url: '/Home/GetEmployeeList', 
      params: { filterData: 'Test' }, 
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
      }).then(onSuccess, onError); 

      var onSuccess = function (response) { 
       this.Users = response.data; 
       this.errors = ''; 
      }; 

     var onError = function (reason) { 
       this.users = null; 
       this.errors = "Error in retrieving data."; 
     }; 
    } 
}]); 


angular.module('Employee', ['EmployeeServiceModule']) 
     .controller('EmployeeController', ['EmployeeSer', '$scope', '$http', function (EmployeeSer, $scope, $http) { 
      this.users = EmployeeSer.users; 
      EmployeeSer.SearchEmployee(); 
}]); 

И вторым способом было бы вернуть обещание в сервисе и развернуть его в контроллере.

angular.module('EmployeeServiceModule', []) 
     .service('EmployeeSer', ['$http',function ($http) { 
      this.SearchEmployee = function() { 
       return $http({ 
        method: 'GET', 
        url: '/Home/GetEmployeeList', 
        params: { filterData: 'Test' }, 
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 
       }); 
      } 
}]); 


angular.module('Employee', ['EmployeeServiceModule']) 
     .controller('EmployeeController', ['EmployeeSer', '$scope', '$http', function (EmployeeSer, $scope, $http) { 

     this.GetAllEmployee = function() { 
      EmployeeSer.SearchEmployee() 
         .then(onSuccess, onError) 
     }; 

     var onSuccess = function (response) { 
      $scope.user = response.data; 
      $scope.error = ''; 
     }; 

     var onError = function (reason) { 
      $scope.error = "Error in retrieving data."; 
     }; 

}]); 

ТЕМЕ OFF Вы, вероятно, следует рассмотреть возможность использования ngModel вместо JQuery, чтобы получить вам данные в контроллер. Не так:

var empData = { 
     Id: $("#txtId").val(), 
     Name: $("#txtName").val(), 
     Expertise: $("#expertise").val() 
}; 

Answer 2

// Here serverRequest is my service to make requests to the server 

serverRequest.postReq = function(url, data, sucessCallback, errorCallback){ 
$http({ 
method: 'POST', 
url: urlToBeUsed, 
data:data, 
headers : {'Content-Type': 'application/x-www-form-urlencoded'}}) 
.success(function(data, status, headers, config) { 
sucessCallback(data); 
}) 
.error(function(data, status, headers, config){ 
errorCallback(data); 
}) 
} 

// In the controller 
serverRequest.postReq('urlToBeCalled', dataToBeSent, scope.successCb, scope.errorCb); 

scope.successCb = function(data){ 
// functionality to be done 
} 
scope.errorCb = function(data){ 
// functionality to be done 
} 

Try it this way your problem might be solved 
Promise must be unwrapped in your controller if you want to use it