Question

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

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


}]);

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

Answer 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>

Answer 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();

$ resource function wrapper angularjs

2 个答案: