Возникли проблемы с AngularJS Factory при возврате данных контроллеру

У меня возникли некоторые проблемы с отправкой данных, полученных из моего API с Angular на мой контроллер... В коде вы можете увидеть комментарии к проблеме... Я делаю $ http.get () запрашивает, и я получаю свою информацию, но затем, в возврате, данные исчезают :S

angular.module('OurenApp.services', ['ngCookies'])

    .factory('Customers', function (CONFIG, $cookies, $http) {
        // Get Customers from API
        var customers = [];
        var req = {
            method: 'GET',
            url: CONFIG.APIURL + '/customers/' + $cookies.get('user_id') + '/' + $cookies.get('API_KEY'),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
        };
        $http(req).then(function successCallback(response) {
            // Set message and send data to the view
            //console.log(response.data.customers);
            customers = response.data.customers; // <- Here I have an array of Objects (each object is a customer)

        }, function errorCallback(err) {
            // Set error message
            console.log(err);

        })
        return {
            all: function () {
                console.log(customers); // <- Here I have an empty object ¿?¿?¿?
                return customers;
            },
            remove: function (customer) {
                customers.splice(customers.indexOf(customer), 1);
            },
            get: function (customerId) {
                for (var i = 0; i < customers.length; i++) {
                    if (customers[i].id === parseInt(customerId)) {
                        return customers[i];
                    }
                }
                return null;
            }
        };
    });

Вот что я получаю: 

customers: Array[21]
0: Object
1: Object
2: Object
3: Object
    edited: "2015-11-26T22:57:25+0100"
    id: 88
    location: "Servicio Técnico Oficial"
    name: "Makumba"
    pass: "olakase"
    phone: "600999222"
    seen: 1
    status: "En Curso"
    __proto__: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
12: Object
13: Object
14: Object
15: Object
16: Object
17: Object
18: Object
19: Object
20: Object
length: 21
__proto__: Array[0]

Ионный шаблон поддельной информации имеет такую структуру: 

// Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'img/ben.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it's me',
    face: 'img/max.png'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'img/adam.jpg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'img/perry.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'img/mike.png'
  }];

Поэтому я предполагаю, что мне нужно преобразовать мой массив объектов в это... Кто-нибудь может мне помочь!! Спасибо :)

Отредактировано!

И еще один вопрос... Как я могу сделать, чтобы обновить данные. Я читал, что фабрики получают данные только один раз. Но когда я добавляю нового клиента, мне нужно перезагрузить новые данные или иметь кнопку для перезагрузки страницы.... Я пытался с $state, но не работает.

Спасибо!

1 3
angularjs factory ionic-framework angularjs-factory

1 ответ:

Это не тот способ, которым вы должны обращаться с асинхронным вызовом. Вы должны подождать, пока это не закончится, а затем вернуть данные с контроллера.

В этом случае это может быть достигнуто с помощью $q. В основном $http.get возвращает обещание. И на resolve он выполняет .then 1-ю функцию как успешный обратный вызов и 2-ю как обратный вызов ошибки.

Используя $q, вы хотели подождать, пока обещание не будет выполнено. Вы можете использовать $q.when(promise) , который снова будет иметь функцию .then, .then функция получает вызывается, когда объект promise получает разрешение и return некоторые данные. Этот механизм называется так: цепное обещание.

Фабрика 

.factory('Customers', function (CONFIG, $cookies, $http, $q) {
    // Get Customers from API
    var customers = [];
    var req = {
        method: 'GET',
        url: CONFIG.APIURL + '/customers/' + $cookies.get('user_id') + '/' + $cookies.get('API_KEY'),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    };
    //created promise object
    var promise = $http(req).then(function successCallback(response) {
        // Set message and send data to the view
        //console.log(response.data.customers);
        customers = response.data.customers; // <- Here I have an array of Objects (each object is a customer)
        return customers;
    }, function errorCallback(err) {
        // Set error message
        console.log(err);
        return err;
    })
    return {
        all: function () {
            console.log(customers); // <- Here I have an empty object ¿?¿?¿?
            //returned promise will wait till promise gets complete.
            return $q.when(promise).then(function(){
               return customers; //returning data to continue promise chain
            });
        },
        remove: function (customer) {
            customers.splice(customers.indexOf(customer), 1);
        },
        get: function (customerId) {
            for (var i = 0; i < customers.length; i++) {
                if (customers[i].id === parseInt(customerId)) {
                    return customers[i];
                }
            }
            return null;
        }
    };
});

Контроллер 

//.then function will get call when ajax gets completed.
Customers.all().then(function(customers){
   console.log(customers)
})
3