AngularJS - 控制器將從服務（MVC Web API調用）返回的數據定義爲undefined

我是AngularJS &的新成員，處理樣本。在我的示例應用程序中，我有一個MVC Web API（它從db返回一些數據）&它將從Angular Services中調用並將數據返回給Controller。問題是我正確地獲取了我的服務成功方法中的數據，但在我的控制器中始終顯示未定義&視圖中沒有顯示任何內容。請參閱下面的代碼：AngularJS - 控制器將從服務（MVC Web API調用）返回的數據定義爲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"); 
    }); 

    } 
});

請幫我解決這個問題。

來源

2013-10-14 user972255

那是因爲你的服務定義功能GetCustomers的，但它本身實際上並不返回任何的方法，它只是讓一個HTTP調用。

您需要提供的一些形式的回調函數像

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

，然後有回調返回或數據集到控制器。儘管如此，回調可能必須來自控制器本身。

或更好，你可以使用promise來處理返回時的回報。

的承諾可能看起來像

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-14 22:24:13 Joseph

這就是我通過調用匿名函數在成功方法中所做的。 – user972255

沒有我的回調意思是您可以讓控制器將回調傳遞到服務中並以這種方式獲取數據。但是我認爲這個承諾無論如何都是更好的選擇。 – Joseph

它說「$ q沒有定義」。我錯過了什麼嗎？ – user972255

您的問題在於您的服務實施。您不能簡單地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-14 22:24:03 ksimons

它說：「$ Q沒有定義」。我錯過了什麼嗎？ – user972255

對不起，錯過了它的服務依賴關係。 – ksimons

感謝它的工作。 – user972255

很晚的答案，但是，角的$http方法return promises，所以沒有必要與$q包裝到一切形式的承諾。所以，你可以：

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

，然後調用客戶端控制器.success()或.error()快捷的方法。

如果你想更進一步，有一個完整的RESTful CustomerService而不必寫這個樣板，我建議restangular庫，這使得各種方法可供你使用 - 當然假設你後端響應HTTP verbs in the "standard fashion"。

然後，你可能只是這樣做：

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

，並呼籲Restangular提供給您的方法。

來源

2015-07-08 19:25:58 JaKXz

我使用它在Angular Web Data Service和Web Api控制器之間進行通信。

.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-12 10:07:34

AngularJS - 控制器將從服務（MVC Web API調用）返回的數據定義爲undefined

回答

相關問題