AngularJS 的数据流问题答案

【问题标题】：Data flow issue with AngularJSAngularJS 的数据流问题
【发布时间】：2014-03-25 00:06:10
【问题描述】：

我在指令中有一个函数，可以进行查询（并根据控制台获取结果）。问题是我似乎无法将这些结果存储到工厂中，并将它们传递给控制器。

这是指令：

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

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

};

控制台显示 dataService 包含一个包含结果的数组。然后，我尝试将其存储到工厂中：

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

我在控制器中调用它：

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

但是 items 和 $scope.versions 都返回一个空数组。我错过了什么吗？

【问题讨论】：

标签： javascript angularjs factory

【解决方案1】：

您确实应该使用支持字段来存储该数据，并分别使用 setter 和 geter 函数进行写入和读取：

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

对于设置数据：

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

阅读：

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

See demo plunk.

【讨论】：

嗨 Mohammad，我已经尝试过您的代码，但返回 ReferenceError: dataService is not defined.
1 秒，让我做个小插曲
等等，我的给你，快完成了
@EricMitjans 那是因为您没有将 dataService 注入到指令构造函数中，请执行以下操作：app.directive('release', ['musicInfoService','dataService', function(musicInfoService,dataService) {
我在那个 plunk 中看不到未定义的错误，你能粘贴你在控制台中得到的确切错误吗？

【解决方案2】：

这里发生了对角工厂的误解。您正在尝试设置 dataService = ，这将永远无法正常工作。

正如 Mohammad 所提到的，您需要在工厂的返回值之外设置一个变量，并且返回值基本上是一个具有允许您操作常量的函数的对象。所以你需要一个 getter "getItems()" 来获取物品，以及一个 setter "addItem(item)" 来添加一个物品到你的 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);
  });
}

【讨论】：