如何從AngularJs中的常規函數​​調用工廠

Question

我有一個被某些控制器稱為工廠的工廠。

app.factory('fileData', function($http) { 
    return {
        get:  function(filename){  return $http({ method: 'GET',  url: filename}); 
        }
    };
});

現在，我想從常規函數中調用它，並從工廠返回數據。 我怎樣才能做到這一點？ 這是行不通的，因為沒有$ scope不能識別傳入的fileData。

function getData (file, fileData) {
   rels = [];
   var handleSuccess = function(data, status) {
      rels = data;
      console.log(rels);
   };
   fileData.get(filename).success(handleSuccess);
   return rels;     
}

知道如何解決這個問題嗎？

Answer 1

您對工廠中公開的方法的調用（ get ）使用$http服務，該服務返回一個承諾。 因此，您無法以同步方式獲得此調用的結果。

在您的示例中， return rels發生在調用handleSuccess方法之前，因此您將返回舊值（一個空數組）。

它在控制器功能中起作用的原因是控制器實例的生存時間更長，並且當服務器調用成功返回時，將分配控制器$scope的變量（然后通過角度數據綁定將其反映在您的UI中）。

因此，解決此問題的最佳方法是避免在“常規函數”中使用同步api。 您是否可以通過返回承諾使它也異步？

Answer 2

移動return rels內handleSuccess ，你才返回handleSuccess獲取調用。 因此，您表示該函數過早完成了執行。

function getData (file, fileData) {
   rels = [];
   var handleSuccess = function(data, status) {
      rels = data;
      console.log(rels);

      return rels; // Return rels when the Promise is finished
   };

   fileData.get(file).success(handleSuccess);
}

由於您要從$http返回承諾，因此您需要以異步方式處理其執行，直到承諾被解決后才返回。

添加reject處理程序也是一個好主意。

此外， .success()已被廢棄，你應該使用.then()和.catch()分別用於處理resolve()和reject()適當的承諾。

參見下文，了解使用$http進行承諾的首選方法

fileData.get(file)
  .then(handleSuccess)
  .catch(handleFailure); // Handle any errors returned from $http

---

控制器的DI示例的EDIT更新

您需要將fileData工廠注入到Angular Controller中。 有關Dependency Inject的更多信息，請參見DI的Angular文檔 。 請注意，DI是Angular的重要組成部分，因此在繼續進行之前了解這一點非常基礎。

angular
  .module('yourApp')
  .controller('yourController', ['$scope', 'fileData', function($scope, fileData) {
    // Expose getData via $scope
    $scope.getData = getData;

    function getData(file, fileData) {
      var rels = [];
      var handleSuccess = function(data, status) {
        rels = data;
        console.log(rels);
        return rels;   
      };

      fileData.get(file)
        .then(handleSuccess);
    }
  }]);