Question

我正在寻找一种方法（一种功能）从ng-repeat列表中的点击元素中获取数据并将其传递给控制器。

我的dirctive得到的数据如下：

var defaultFormat = scope.release.format;
    musicInfoService.getReleaseVersions(scope.release.id)
    .success(function(data) {
        if (data.error) return;

        var format = data.versions,
          formats = scope.release.format;

        if (format !== '') {
          formats = format;
        }

        scope.defaultFormat = formats;
        dataService.setItems(scope.defaultFormat);
      })
      .error(function($scope) {
        scope.basicFormat = scope.release.format;
        dataService.setItems(scope.basicFormat);
     });

它将它存储在工厂中：

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

在控制器端，该函数将触发getItems，但它不起作用。

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

这是一个Plunker。每个专辑名称下面显示的列表应该出现在单击时打开的框中，但该框仅显示来自最后一个元素的数据（最后一个数据存储在scope.basicFormat或scope.defaultFormat变量中），所以我得到的结论是到目前为止，该函数不会触发每个元素的setItems。

Answer 1

这是因为您呼叫musicInfoService.getReleaseVersions数千次，但dataService.setItems函数无法区分这些调用并始终覆盖结果。这就是为什么只显示最后的结果。

首先修复数据服务工厂，使其占用key参数：

app.factory('dataService', [function($scope){
    var _items= {};
    return { 
          setItems:function(key, value){
             _items[key] = value;
          },
          getItems:function(key){
             return _items[key] ? _items[key] : _items["basic"];
          }
    };
}]);

然后更新setItems来电：

    // ...
    scope.defaultFormat = formats;
    dataService.setItems(scope.release.id.toString(), scope.defaultFormat);
})
.error(function($scope) {
    scope.basicFormat = scope.release.format;
    dataService.setItems("basic", scope.basicFormat);
});

并更新getItems来电：

$scope.versions = dataService.getItems($scope.release.id.toString());

在此之后，您的Plunker示例将起作用。

将数据从指令传递到AngularJS中的控制器

1 个答案: