AngularJS $http 的范围问题
AngularJS scope issue with $http
继续我对 AngularJS 的冒险,我认为这是一个范围问题,但不完全确定。
在我的控制器中,我正在构建两个用于演示目的的测试数组,search.filterDemo 和 search.filter(真实数据)。
控制器
app.controller('searchBtnCtrl', ['$scope', '$http', function ($scope, $http) {
var search = this;
search.filter = {};
search.results = [];
search.resultsDemo = [];
search.keywordsToFilter = [
{ name: 'itemA' },
{ name: 'itemB' },
{ name: 'itemC' },
{ name: 'itemD' }
];
$scope.performSearch = function () {
search.resultsDemo = [
{ name: 'itemA', content: 'This is demo content' },
{ name: 'itemB', content: 'This is demo content' },
{ name: 'itemC', content: 'This is demo content' },
{ name: 'itemD', content: 'This is demo content' }
];
$http.get('http://localhost/content').then(function (response) {
search.resultCount = response.data.response.docs.length;
for (var i = 0; i < search.resultCount; i++) {
search.results.push({ name: search.results[i]._name[0], content: search.resultsTemp[i]._content[0]});
}
console.log(search.results);
});
console.log(search.resultsDemo);
console.log(search.results);
}
}]);
search.resultsDemo 的控制台日志输出与我预期的一样:
Array [ Object, Object, Object, Object, Object, Object, Object, Object ]
然后,如果我单击数组 link,我会看到该数组有 8 个项目
Array[8]
这对我来说都是正确的,我的第一个数组保持它的范围。
但是我的第二个阵列并不完全。
第二个数组的输出如下:
在 $http 调用中它正确显示 -
Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 3 more… ]
但是数组的第二个 console.log 仅在 3 行之后显示为:
Array[ ]
如果我点击数组 link,它会显示:
数组[0]
有趣的是数据就在那里,只是不像第一个数组那样显示为对象(我可以单击数组 link,我确实看到了数组 [0 下列出的对象] 在控制台中,我可以旋转它们打开以查看数据。
这是范围问题,还是与 Angular 的异步性质相关的其他问题导致我的第二个(实际)数组格式不正确?
这让我很抓狂,因为我需要像第一个数组一样正确格式化我的第二个数组,以便稍后在函数中进行处理。
谢谢!
那是因为你的第二个 console.log
超出了你的 then
语句的范围。当您的第二个 console.log
运行时,数据可能尚未返回。
事实上,我敢打赌,您的第二个 console.log(search.results)
可能会在您的第一个 console.log(search.results)
之前出现在您的控制台中。
继续我对 AngularJS 的冒险,我认为这是一个范围问题,但不完全确定。
在我的控制器中,我正在构建两个用于演示目的的测试数组,search.filterDemo 和 search.filter(真实数据)。
控制器
app.controller('searchBtnCtrl', ['$scope', '$http', function ($scope, $http) {
var search = this;
search.filter = {};
search.results = [];
search.resultsDemo = [];
search.keywordsToFilter = [
{ name: 'itemA' },
{ name: 'itemB' },
{ name: 'itemC' },
{ name: 'itemD' }
];
$scope.performSearch = function () {
search.resultsDemo = [
{ name: 'itemA', content: 'This is demo content' },
{ name: 'itemB', content: 'This is demo content' },
{ name: 'itemC', content: 'This is demo content' },
{ name: 'itemD', content: 'This is demo content' }
];
$http.get('http://localhost/content').then(function (response) {
search.resultCount = response.data.response.docs.length;
for (var i = 0; i < search.resultCount; i++) {
search.results.push({ name: search.results[i]._name[0], content: search.resultsTemp[i]._content[0]});
}
console.log(search.results);
});
console.log(search.resultsDemo);
console.log(search.results);
}
}]);
search.resultsDemo 的控制台日志输出与我预期的一样:
Array [ Object, Object, Object, Object, Object, Object, Object, Object ]
然后,如果我单击数组 link,我会看到该数组有 8 个项目
Array[8]
这对我来说都是正确的,我的第一个数组保持它的范围。
但是我的第二个阵列并不完全。
第二个数组的输出如下: 在 $http 调用中它正确显示 -
Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 3 more… ]
但是数组的第二个 console.log 仅在 3 行之后显示为:
Array[ ]
如果我点击数组 link,它会显示:
数组[0]
有趣的是数据就在那里,只是不像第一个数组那样显示为对象(我可以单击数组 link,我确实看到了数组 [0 下列出的对象] 在控制台中,我可以旋转它们打开以查看数据。
这是范围问题,还是与 Angular 的异步性质相关的其他问题导致我的第二个(实际)数组格式不正确?
这让我很抓狂,因为我需要像第一个数组一样正确格式化我的第二个数组,以便稍后在函数中进行处理。
谢谢!
那是因为你的第二个 console.log
超出了你的 then
语句的范围。当您的第二个 console.log
运行时,数据可能尚未返回。
事实上,我敢打赌,您的第二个 console.log(search.results)
可能会在您的第一个 console.log(search.results)
之前出现在您的控制台中。