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

试试这个：

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

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

代码中几乎没有问题。我以 github API 为例，同样的事情也适用于你的例子（data.json 数据）。

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

 app.factory('itemsFactory', function($http) {
   var factory = {};

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

   return factory;
});

这里有两种写controller的方式。一种是使用 success() 方法，另一种是使用 then() 方法。这两种方法的用法是有区别的。 success() 方法处理 "data"，然后 () 方法处理 "response"。当我们处理 then() 方法时，我们应该考虑 "response.data" 来获取实际数据。 "response" 对象还有其他信息以及 "data"。下面介绍两种使用方法。

// 1.success() 方法。
```
 app.controller('MainCtrl', function($scope, itemsFactory){

 itemsFactory.getItems().success(function(data){
          $scope.items = data;
      });
 });
```
// 2.then() 方法
```
app.controller('MainCtrl', function($scope, itemsFactory){
itemsFactory.getItems().then(function(response){
         $scope.items = response.data;
    });
});
```

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

JSON 对象作为 angularjs 工厂

JSON object as angularjs factory

json

factory

angularjs

编辑