如何从AngularJS中的服务调用ajax？

I have Employee controller which is having property Id, Name , Specification. I have made one Employee service which is having ajax call and get employee list. But every time getting '' in User. When i debug the code i found that it call success first and then it goes for Ajax call. When i do ajax call without service it works fine.

我有Employee控制器，它具有属性Id，Name，Specification。我已经制作了一个员工服务，该服务具有ajax调用并获得员工列表。但每次都在'用户'。当我调试代码时，我发现它首先调用成功，然后进行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.";
    };

}]);

2 个解决方案

#1

It's because you are returning the users before the data is fetched from the server. Also it doesn't seem like you are assigning them correctly.

这是因为您在从服务器获取数据之前返回用户。此外，您似乎没有正确分配它们。

Here are two ways to solve the problem:

以下是解决问题的两种方法：

Firstly. You bind your controller user-data to the user-data in the service.

首先。您将控制器用户数据绑定到服务中的用户数据。

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

And the second way would be to return the promise in the service and unwrap it in the controller.

第二种方法是返回服务中的promise并将其解包到控制器中。

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 TOPIC You should probably consider using ngModel instead of jQuery to get you data to the controller. Not like this:

OFF主题您应该考虑使用ngModel而不是jQuery来获取控制器的数据。不是这样的：

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

#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

#1