JSON-объект как фабрика angularjs

0

У меня есть локальный объект, который я пытаюсь превратить в фабрику, поэтому он может использоваться моим основным контроллером:

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

Вышеизложенное отлично. Я использую этот поток как ссылку, но не могу заставить его работать. Что я делаю не так?

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

РЕДАКТИРОВАТЬ

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

});
  • 0
    В первом примере кода вы возвращаете factory , а во втором возвращаете items . Как items относятся к factory в вашем первом примере кода?
  • 0
    Извините, это была старая версия. (С изменениями) Проблема все та же.
Показать ещё 1 комментарий
Теги:
factory

3 ответа

3
Лучший ответ

В коде есть несколько проблем. Я использовал github API в качестве примера, и то же самое будет работать с вашим примером (data.json data).

  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(), мы должны рассмотреть "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;
    });
});

Демо-версия Live на JSFiddle: http://jsfiddle.net/rajkarri/hejr5e8o/1/

Поделиться
  • 0
    Это фантастический ответ Rethabile, просто реализующий его сейчас. Может ли тот же console.log (ответ), предложенный Rethabile ниже, работать для $ scope.items (в настоящее время я получаю неопределенные элементы), поскольку я хочу понять, в чем разница между ответом и данными.
  • 0
    Кроме того, чтобы получить доступ к моим данным JSON через другую функцию, мне нужно было бы выполнить что-то вроде: app.getSelectedRating = function (rating) {$ scope.rating = 0; $ scope.ratings = ItemsFactory.response.data (model.rating) ...
1

вам нужно ввести "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;
         });
 });
Поделиться
  • 0
    Я внес исправления, но получаю сообщение об ошибке: [ng: areq] Аргумент 'MainCtrl' не является функцией, получил неопределенное значение
  • 0
    Я исправил снова. Смотри выше под РЕДАКТИРОВАТЬ. Это были синтаксические ошибки над app.conroller. Однако сейчас нет ошибок и нет данных. Страница просто "молчит"
Показать ещё 1 комментарий
0

Попробуй это:

<div class="container" ng-repeat="item in items" ..
Поделиться
  • 0
    HI Ибрагимович, это все еще не работает. Данные просто не найдены.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню