当 return 数据到控制器时 AngularJS 工厂出现问题
Having problems with AngularJS Factory when return data to the controller
我在将使用 Angular 从我的 API 接收到的数据发送到我的控制器时遇到了一些问题...在代码中您可以看到有关该问题的评论...我做了一个$http.get() 请求,我得到了我的信息,但随后,在 return 中,数据消失了 :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]
Ionic 模板虚假信息具有以下结构:
// 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 但不起作用。
谢谢!
这不是您处理异步调用的方式。您应该等到完成,然后 return 来自控制器的数据。
在这种情况下,可以使用 $q
来实现。基本上 $http.get
return 是一个承诺。并在解析时执行 .then
第一个函数作为成功回调,第二个函数作为错误回调。
使用 $q
你想等到 promise 完成。您可以使用 $q.when(promise)
,它将再次具有 .then
函数,当 promise
对象得到解析和 return
一些数据时,将调用 .then
函数。这种机制称为 chain promise.
工厂
.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)
})
我在将使用 Angular 从我的 API 接收到的数据发送到我的控制器时遇到了一些问题...在代码中您可以看到有关该问题的评论...我做了一个$http.get() 请求,我得到了我的信息,但随后,在 return 中,数据消失了 :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]
Ionic 模板虚假信息具有以下结构:
// 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 但不起作用。
谢谢!
这不是您处理异步调用的方式。您应该等到完成,然后 return 来自控制器的数据。
在这种情况下,可以使用 $q
来实现。基本上 $http.get
return 是一个承诺。并在解析时执行 .then
第一个函数作为成功回调,第二个函数作为错误回调。
使用 $q
你想等到 promise 完成。您可以使用 $q.when(promise)
,它将再次具有 .then
函数,当 promise
对象得到解析和 return
一些数据时,将调用 .then
函数。这种机制称为 chain promise.
工厂
.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)
})