Fatal编程技术网
  • angularjs/
  • AngularJS-Controller获取从服务（MVCWebAPI调用）返回的未定义数据

AngularJS-Controller获取从服务（MVCWebAPI调用）返回的未定义数据

angularjs asp.net-web-api

AngularJS-Controller获取从服务（MVCWebAPI调用）返回的未定义数据,angularjs,asp.net-web-api,Angularjs,Asp.net Web Api,我是AngularJS的新手&正在制作一个样本。在我的示例应用程序中，我有一个mvcwebapi（它从db返回一些数据）&它将从Angular服务调用，并将数据返回给控制器。问题是我在我的servicessuccess方法中正确地获取了数据，但是在我的控制器中它总是显示undefined&视图中没有显示任何内容。请参阅下面的代码： 我的控制器代码： app.controller('CustomerController', function ($scope, customerService) {

我是AngularJS的新手&正在制作一个样本。在我的示例应用程序中，我有一个mvcwebapi（它从db返回一些数据）&它将从Angular服务调用，并将数据返回给控制器。问题是我在我的servicessuccess方法中正确地获取了数据，但是在我的控制器中它总是显示undefined&视图中没有显示任何内容。请参阅下面的代码：

我的控制器代码：

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

    }
});
请帮助我解决此问题。

您的问题在于您的服务实现。您不能简单地
返回数据，因为数据在异步成功回调中

相反，您可以返回一个承诺，然后在控制器中处理该承诺：


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



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


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

然后在控制器中：


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



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



您的问题在于您的服务实现。您不能简单地
返回数据，因为数据在异步成功回调中

相反，您可以返回一个承诺，然后在控制器中处理该承诺：


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



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


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

然后在控制器中：


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



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



这是因为您的服务定义了函数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;
    }
});


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

或者更好的是，当退货回来时，您可以使用a来处理退货

承诺可能看起来像


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



这是因为您的服务定义了函数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;
    }
});


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

或者更好的是，当退货回来时，您可以使用a来处理退货

承诺可能看起来像


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



回答得很晚，但是Angular的
$http
方法，所以没有必要用
$q
将所有内容包装成承诺形式。所以，你可以：


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


然后在客户端控制器中调用
.success（）
或
.error（）
快捷方式方法


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


如果您想更进一步，拥有一个完全成熟的RESTful
CustomerService
，而不必编写这个样板文件，我建议您使用这个库，它可以为您提供各种方法——当然，假设您的后端响应

然后你可以这样做：


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



然后调用Restangular提供给您的方法。
很晚才回答，但是Angular的
$http
方法，因此没有必要使用
$q
将所有内容包装到承诺表单中。所以，你可以：


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


然后在客户端控制器中调用
.success（）
或
.error（）
快捷方式方法


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


如果您想更进一步，拥有一个完全成熟的RESTful
CustomerService
，而不必编写这个样板文件，我建议您使用这个库，它可以为您提供各种方法——当然，假设您的后端响应

然后你可以这样做：


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



并调用Restanglar提供给您的方法。
我使用它在Angular Web数据服务和Web Api控制器之间进行通信


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


或


我将其用于AngularWeb数据服务和Web Api控制器之间的通信


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


或


这就是我在success方法中通过调用匿名函数所做的。不，我所说的回调是指您可以让控制器将回调传递到服务中，并以这种方式获取数据。但我认为无论如何，承诺是更好的方式。它说“$q没有定义”。我错过什么了吗？谢谢，它成功了。顺便说一句，你知道为什么我返回的JSON列表对象在“data.$values”下而不是直接在“data”对象下。这就是我在success方法中通过调用匿名函数所做的。不，我所说的回调是指你可以让控制器将回调传递到服务中并以这种方式获取数据。但我认为无论如何，承诺是更好的方式。它说“$q没有定义”。我错过什么了吗？谢谢，它成功了。顺便说一句，你知道为什么我返回的JSON列表对象位于“data.$values”之下，而不是直接位于“data”对象之下。它说“$q未定义”。我遗漏了什么吗？抱歉，在服务依赖项中遗漏了它。我尝试解决时出错。通过更改此选项：q.resolve（data）；=>延迟。解析（数据）；和q.拒绝（数据）；=>延迟。拒绝（数据）；它表示“$q未定义”。我遗漏了什么吗？抱歉，在服务依赖项中遗漏了它。我尝试解决时出错。通过更改此选项：q.resolve（data）；=>延迟。解析（数据）；和q.拒绝（数据）；=>延迟。拒绝（数据）；它起作用了