Data flow issue with AngularJS

Question

I have a function inside a directive that makes a query (and gets results, according to the console). The problem is that I can't seem to be able to store those results into a factory, and pass them to a controller.

This is the directive:

scope.getVersions = function(release) {
      if (angular.isUndefined(release)) return;

      musicInfoService.getReleaseVersions(release.id)
        .success(function(data) {
          dataService = data.versions;
          console.log(dataService);
        });

};

The console shows that dataService contains an array with the results. Then, I try to store it into a factory:

app.factory('dataService', [function(){
  return { items: [] };
}]);

And I call it in a controller:

function VersionController($scope, dataService) {
  $scope.versions = dataService.items;
  console.log($scope.versions);
}

But both items and $scope.versions come back an empty array. Did I miss something?

Answer 1

You should really use a backing field to store that data, and use setter and geter functions for writing and reading respectively:

app.factory('dataService', [function(){
   var _items={};
   return { 
          setItems:function(value){
             _items=value;
          },
          getItems:function(){
             return _items;
          }
  };
}]);

And for setting the data:

 musicInfoService.getReleaseVersions(release.id)
        .success(function(data) {
          dataService.setItems(data.versions);
          console.log(dataService);
        });

and reading:

function VersionController($scope, dataService) {
  $scope.versions = dataService.getItems();
  console.log($scope.versions);
}

See demo plunk.

Answer 2

There's a misunderstanding of angular factories going on here. You're trying to set dataService = , which will never work.

As Mohammad mentioned, you need to have a variable set outside of your return value in the factory and the return value is basically an object with functions that allow you to manipulate your constant. So what you need is a getter "getItems()" for getting the items, and a setter "addItem(item)" for adding an item to your items array.

So you're never directly injecting your "items" into a controller, you're injecting a bunch of functions that can get or manipulate your "items".

scope.getVersions = function(release) {
      if (angular.isUndefined(release)) return;

      musicInfoService.getReleaseVersions(release.id)
        .success(function(data) {
          dataService.addItem(data.versions);
          console.log(dataService.getItems());
        });
};

app.factory('dataService', [function(){
  var items = [];
  return {
    addItem: function(item) {
      items.push(item);
    },
    getItems: function() {
      return items;
    }
  };
}]);

function VersionController($scope, dataService) {
  $scope.$watch(dataService.getItems, function(items) {
    $scope.versions = items;
    console.log($scope.versions);
  });
}