JSON对象作为angularjs工厂

Question

我有一个本地对象，我想把它变成一个工厂，以便我的主控制器可以使用它：

//factory
app.factory('items', function($http) {
        var items= {}; // define factory object
    var items = $http.get('pathtojson/data.json').success(function(response) {
        return response.data;
    });
    return items; // returning factory to make it ready to be pulled by the controller

});

控制器内部（Mainctrl）：

<div class="container" ng-repeat="item in items.data"  ...

但是，什么也没有发生。我首先通过将json作为数组直接粘贴到工厂中来测试它，所以我有：

app.factory("items", function () {
    var items = {};
    items.data = [{name: "value"}, {name: "value1"}etc. }];
    return items;
});

以上工作正常。我使用this thread 作为参考，但无法让它工作。我做错了什么？

=================

编辑

var app = angular.module('app', []);

//factory
app.factory('itemsFactory', function($http) {

  return {
      getItems: function () {
         return  $http.get('pathtojson/data.json');
      }
}


});

//controller
app.controller('MainCtrl', function($scope, itemsFactory){
  itemsFactory.getItems().then(function(response){
              $scope.items = response;
        });

});

Answer 1

代码中的问题很少。我以 github API 为例，同样的事情也适用于您的示例（data.json 数据）。

1. 工厂服务代码应该是这样的。应该有一个对象，并且可以挂钩该对象的属性/方法，并且需要返回相同的对象。在这个例子中，getItems() 方法被钩住了。

    app.factory('itemsFactory', function($http) {
      var factory = {};
   
      factory.getItems = function () {
       return  $http.get('https://api.github.com/users/angular/repos');  
      };
   
      return factory;
   });
   

2. 这里有两种写控制器的方法。一种是使用 success() 方法，另一种是使用 then() 方法。这两种方法的用法是有区别的。 success() 方法处理“数据”，then() 方法处理“响应”。当我们处理 then() 方法时，我们应该考虑“response.data”来获取实际数据。 “响应”对象与“数据”一起具有其他信息。以下是两种使用方法。

   // 1.success() 方法。

   app.controller('MainCtrl', function($scope, itemsFactory){
   itemsFactory.getItems().success(函数(数据){ $scope.items = 数据； }); });

   // 2.then() 方法

   app.controller('MainCtrl', function($scope, itemsFactory){ itemsFactory.getItems().then(function(response){ $scope.items = response.data; }); });

JSFiddle 上的现场演示：http://jsfiddle.net/rajkarri/hejr5e8o/1/

Answer 2

您需要将“itemsFactory”注入您的控制器，并将您的工厂包装在一个函数中，使其看起来像这样：

app.factory('itemsFactory', function($http) {
return {
    getItems: function () {
       return  $http.get('pathtojson/data.json');
    }
}

 app.controller("Mainctrl", function(itemsFactory, $scope){

         itemsFactory.getItems().then(function(response){
               $scope.items = response;
         });
 });

Answer 3

试试这个：

<div class="container" ng-repeat="item in items" ..