Как правильно сделать GET запрос Angular?

Question

[zyulev]

$http.get("lists.php")
.then(function(response) {
$scope.lists = response.data.lists;
console.log($scope.lists); // возвращает массив
});
console.log($scope.lists); // возвращает пустой массив []

Answer 1

[rakro]

Запрос выполняется правильно. Дело в асинхронности. На момент второго console.log get запрос еще не выполнился.

Comments

[zyulev]

как мне быть?

[bullyy]

zyulev: а что требуется сделать?

[zyulev]

нужно чтобы массив не был пустым сразу после гет запроса

[zyulev]

$http.get("lists.php")
.then(function(response) {
$scope.lists = response.data.lists;
console.log($scope.lists); // возвращает массив
});
console.log($scope.lists); // возвращает пустой массив []

service.getLists = function () {
return lists;
};

[rakro]

zyulev: Во-первых return $scope.lists. В чем проблема? после get запроса массив не будет пустым.

[zyulev]

rakro: не работает, так же пустой массив

[zyulev]

rakro: $timeout тоже не помог

[rakro]

zyulev: добавь в описание вопроса весь код контроллера и шаблона.

[zyulev]

rakro: angular.module('app').factory('listFactory', function ($http) {

var service = {};

var lists = [];

lists = [{"id":1,"listName":"Проект 11", "listDesc": "текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст"},{"id":2,"listName":"Проект 2"},{"id":3,"listName":"Проект 3"}]


/*
$http.get("lists.php")
.then(function(response) {
lists = response.data.lists;
console.log(lists);
});
*/


service.getLists = function () {
return lists;
};

service.addList = function (listName, listDesc, files) {

console.log(files);

lists.push({
id: _.uniqueId('list_'),
listName: listName,
listDesc: listDesc,
files: files
});
};

service.removeList = function (list) {
_.pull(lists, list);
};

return service;
});

[zyulev]

rakro: angular.module('app').controller('listsCtrl', function (listFactory, $routeParams, $scope, $http) {

this.lists = listFactory.getLists();

$scope.listsId = $routeParams.listsId;

$scope.uploadFile = function(files) {
var fd = new FormData();

fd.append("file", files[0]);
//console.log(files);

/*
$http.post("upload.php", fd, {
withCredentials: true,
headers: {'Content-Type': undefined },
transformRequest: angular.identity
}).success( "...all right!..." ).error( "..damn!..." );
*/
};

this.addList = function () {
listFactory.addList(this.listName, this.listDesc, this.files);
//console.log(this.files);
this.listName = '';
this.listDesc = '';
this.files = null;
};
});

//добавление файла
angular.module('app').directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;

element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);

// We can write our own fileUpload service to reuse it in the controller
angular.module('app').service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl, name){
var fd = new FormData();
fd.append('file', file);
fd.append('name', name);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
})
.success(function(){
console.log("Success");
})
.error(function(){
console.log("Success");
});
}
}]);

angular.module('app').controller('fileCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);

var uploadUrl = "upload.php";
var text = $scope.name;
fileUpload.uploadFileToUrl(file, uploadUrl, text);
};

}]);

[rakro]

zyulev: если хочешь получить массив с бэкенда, то из фабрики нужно возвращать промис.

В фабрике

service.getLists = function () {
return $http.get("lists.php")
.then(function(response) {
return response.data.lists;
});
};

В контролере:
listFactory.getLists().then(function(list){
$scope.list = list;
})

[zyulev]

rakro: все равно не работает