1

我是 AngularJS 的新手，正在研究一个示例。在我的示例应用程序中，我有一个 MVC Web api（它从 db 返回一些数据），它将从 Angular 服务调用并将数据返回给控制器。问题是我在我的服务成功方法中正确获取数据，但在我的控制器中它总是显示未定义并且视图中没有显示任何内容。请看下面的代码：

我的控制器代码：

app.controller('CustomerController', function ($scope, customerService) {    
    //Perform the initialization
    init();

    function init() {
        $scope.customers= customerService.getCustomers();        
    }   
});

我的服务代码：

app.service('customerService', function ($http){
       this.getCustomers = function () {
        $http({
            method: 'GET',
            url: 'api/customer'           
        }).
    success(function (data, status, headers, config) {
        return data;
    }).
    error(function (data, status) {
        console.log("Request Failed");
    });

    }
});

请帮我解决这个问题。

4

4 回答 4

6

您的问题在于您的服务实施。你不能简单地return data因为那是在异步成功回调中。

相反，您可能会返回一个承诺，然后在您的控制器中处理它：

app.service('customerService', function ($http, $q){
    this.getCustomers = function () {
        var deferred = $q.defer();
        $http({
            method: 'GET',
            url: 'api/customer'           
        })
        .success(function (data, status, headers, config) {
           // any required additional processing here
           q.resolve(data);
        })
        .error(function (data, status) {
           q.reject(data);
        });
        return deferred.promise;
    }
});

当然，如果你不需要额外的处理，你也可以只返回 $http 调用的结果（这也是一个承诺）。

然后在你的控制器中：

app.controller('CustomerController', function ($scope, customerService) {    
    //Perform the initialization
    init();

    function init() {
        customerService.getCustomers()
            .then(function(data) {
               $scope.customers= data;
            }, function(error) {
               // error handling here
            });        
    }   
});
于 2013-10-14T22:24:03.907 回答
6

那是因为您的服务定义了函数 getCustomers 但该方法本身实际上并没有返回任何内容，它只是进行了一个 http 调用。

您需要以类似的形式提供回调函数

$http.get('/api/customer').success(successCallback);

然后让回调返回或将数据设置到您的控制器。但是，要这样做，回调可能必须来自控制器本身。

或者更好的是，您可以使用承诺在返回时处理返回。

承诺可能看起来像

app.service('customerService', function ($http, $q){
   this.getCustomers = function () {
       var deferred = $q.defer();
       $http({
           method: 'GET',
           url: 'api/customer'           
        }).
        success(function (data, status, headers, config) {
            deferred.resolve(data)
        }).
        error(function (data, status) {
            deferred.reject(data);
        });

        return deferred;
    }
});
于 2013-10-14T22:24:13.040 回答
1

非常晚的答案，但是，Angular 的$http方法返回 promises，所以没有必要用$q. 所以，你可以：

app.service('CustomerService', function ($http) {
  this.getCustomers = function () {
    return $http.get('/api/customer');
  };
});

然后在您的客户端控制器中调用.success()或.error()快捷方法。

如果您想更进一步并拥有一个成熟的 RESTfulCustomerService而无需编写此样板文件，我建议您使用restangular库，它可以为您提供各种方法 - 当然假设您的后端响应HTTP 动词在“标准时尚”中。

然后你可以这样做：

app.service('CustomerService', function (Restangular) {
  return Restangular.service('api/customer');
});

并调用 Restangular 为您提供的方法。

于 2015-07-08T19:25:58.167 回答
0

我将它用于 Angular Web Data Service 和 Web Api Controller 之间的通信。

.factory('lookUpLedgerListByGLCode', function ($resource) {
    return $resource(webApiBaseUrl + 'getILedgerListByGLCode', {}, {
        query: { method: 'GET', isArray: true }
    });
})

或者

.factory('bankList', function ($resource) {
    return $resource(webApiBaseUrl + 'getBanklist_p', {}, {
        post: {
            method: 'POST', isArray: false,
            headers: { 'Content-Type': 'application/json' }
        }
    });
})
于 2017-02-12T10:07:34.020 回答