如何从AngularJs中的常规函数​​调用工厂

Question

I have this factory which is called by some controllers.

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

Now I want to call it from a regular function and return the data from the factory. How can I do that? This one does not work because the fileData passed in is not recognized without $scope.

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

Any idea how to go around this?

Answer 1

Your call to the method exposed in the factory ( get ) uses the $http service which returns a promise. So you cannot get the result of this call in a synchronous way.

In your sample the return rels happens way before the handleSuccess method is called and thus you are returning the old value (an empty array).

The reason it works inside of a controller function is that the controller instance is living for a longer time and when the server call returns successfully, the variable in you controller's $scope is assigned (which then is reflected in your UI via the angular data binding).

So the best way to solve this, is to avoid having a synchronous api in your "regular function". Could you probably make this also async by returning a promise?

Answer 2

Move return rels inside handleSuccess , you're returning before handleSuccess is getting called. So you're signaling that the function completed execution prematurely.

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

Since you're returning the promise from $http , you need to handle its execution in an asynchronous way which, is simply not returning until the promise is resolved.

It would also be a good idea to add a reject handler.

Additionally, .success() is deprecated and you should use .then() and .catch() respectively for handling resolve() and reject() of the Promise appropriately.

See below for the preferred approach to Promises with $http

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

---

EDIT Update for DI example for controller

You need to inject the fileData factory into your Angular Controller. For more info on Dependency Inject see the Angular Docs for DI . Just to note, DI is a huge piece of Angular so it is pretty fundamental to understand this before proceeding.

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