$resource 函数包装器 angularjs答案

【问题标题】：$resource function wrapper angularjs$resource 函数包装器 angularjs
【发布时间】：2013-05-07 02:21:27
【问题描述】：

目前，我正在做这样的事情：

var albumList = $resource('https://api.imgur.com/3/account/guy123/albums').get(function () {
    albumList.data.forEach(function (album) {
        albums.push(album);
    });
});

如何将其转换为可以在我的服务和控制器中调用的函数，例如：

factory('Imgur', function($resource, $http) {
    var albumsService = {};
    var albums = [];

    albumsService.getAlbumList = function() {
        var albumList = $resource('https://api.imgur.com/3/account/guy123/albums').get(function () {
            albumList.data.forEach(function (album) {
                albums.push(album);
            });
        });
    };

    albumsService.albumList = function() {
        albumsService.getAlbumList();
        return albums;
    };

    return albumsService;
});


.controller('Filters', ['$scope','Imgur', function($scope, Imgur) {
    $scope.imgur = Imgur;
    $scope.imgur.albumList();
    //OR
    $scope.imgur.getAlbumList();

    //Some good context here is what if a user wanted to "refresh" the data.
    $scope.updateFilter = function() {
        $scope.imgur.getAlbumList();
    }; 


}]);

这里的最终目标是能够根据需要多次调用资源服务。服务应该是服务内部和控制器内部都可以调用的函数。

【问题讨论】：

可能有助于查看整个代码/控制器等的 plunkr/fiddle。
我不确定您要在这里完成什么。我认为你把事情复杂化了。您是否只是尝试访问 imgur api，但结果格式不同？不清楚您的问题是什么。
倒数第二行 $scope.imgur.albumList(); 没有意义。您没有将函数的结果分配给任何东西。
@jessegavin 是的，复制的语法很抱歉。所以，我试图将var albumList 包装为一个函数。最终目标是能够根据需要多次调用资源服务。服务应该是服务内部和控制器内部都可以调用的函数。
仍然没有意义。您是否尝试显示来自 Imgur 的任何数据？如果是这样，您需要将服务功能的结果分配给范围内的属性。

标签： javascript angularjs

【解决方案1】：

angular.module("MyApp", ['ng-resource']).
  service("Database", function() {
    return {
      albums : $resource('https://api.imgur.com/3/account/guy123/albums')
    }
  }).
  controller("MyCtrl", function(Database) {
    $scope.albums = Database.albums.query();
  })

然后在你的 HTML 中

<html ng-app="MyApp">
<head></head>
<body ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="album in albums">
      {{album.name}}
    </li>
  </ul>
</body> 
</html>

【讨论】：

我需要能够在服务本身内进行服务调用，因此需要将服务作为函数执行。
为什么需要这样做？
我做了一些编辑希望能消除困惑。
好吧，我想做的似乎行不通。我需要重新考虑我的应用程序结构。但是，使用这种方法，我如何在两个控制器中实现成功和错误处理程序？换句话说 - 分配 $scope.albums = data 成功。

【解决方案2】：

服务

var service = angular.module("yourApp.service", ['ngResource']);
service.factory('albumsService', [$resource',function ($resource){
    return $resource('https://api.imgur.com/3/account/guy123/albums',{},{
         query: {method: "GET", isArray:true}
    });
}]);

然后在控制器中

$scope.albumList = albumsService.query();

【讨论】：

我需要能够在服务本身内进行服务调用，因此需要将服务作为函数执行。
你可以使用参数：？取决于您正在执行的服务调用类型。我知道在我的一个用例中，我有几种通过参数管理的请求。
我做了一些编辑希望能消除困惑。
好吧，我想做的似乎行不通。我需要重新考虑我的应用程序结构。但是，使用这种方法，我如何在两个控制器中实现成功和错误处理程序？换句话说 - 分配 $scope.albumList = data 成功。
根据角度文档“一旦从服务器返回数据，现有引用就会填充实际数据。这是一个有用的技巧，因为通常将资源分配给模型，然后渲染由视图. 拥有一个空对象会导致不渲染, 一旦数据从服务器到达, 对象就会被数据填充, 视图会自动重新渲染自己以显示新数据. 这意味着在大多数情况下, 从来没有为动作方法编写回调函数。” docs.angularjs.org/api/ngResource.$resource#Returns