[英]Can't access variable inside angular.js controller
这是我的控制器:
app.controller("PlaceController", ['$http', function($http){
this.places = shops;
var hotels = this;
hotels.objects = [];
this.spots = new Array;
this.newPlace = {};
this.city = new String();
this.addPlace = function() {
this.places.push(this.newPlace);
this.newPlace = {};
var request = *some query syntax, sorry for hiding*
$http.get(request).success(function(data) {
hotels.objects = data;
console.log(hotels.objects.elements);
});
for (each in hotels.objects.elements) {
this.spots.push(each.tags.name);
};
console.log(this.spots);
}}] );
将this.spots
记录到控制台时,我得到一个空数组。 http请求等可以完美地工作,因为console.log(hotels.objects.elements)
语句可以完美地工作。
由于这个问题,我也无法将其输出到HTML中。 我该怎么办?
您正在发出异步请求以获取斑点,但是在它们完成之前对其进行了记录。
更改this.addPlace
以在promise回调内的spots数组上记录/操作:
this.addPlace = function() {
this.places.push(this.newPlace);
this.newPlace = {};
var request = *some query syntax, sorry for hiding*
$http.get(request).success(function(data) {
hotels.objects = data;
console.log(hotels.objects.elements);
for (each in hotels.objects.elements) {
this.spots.push(each.tags.name);
};
console.log(this.spots);
});
您将在ajax请求完成之前添加到spots
数组,移动您的调用以在回调内部进行推送:
$http.get(request).success(function(data) {
hotels.objects = data;
console.log(hotels.objects.elements);
angular.forEach(hotels.objects.elements, function(value) {
hotels.spots.push(value.tags.name);
});
});
另外,您实际上应该使用$scope
而不是this
的引用。 这将简化您的代码位,而无需重新命名this
给hotels
使用$scope
完整控制器代码
app.controller("PlaceController", ['$scope', '$http', function($scope, $http){
$scope.places = shops;
$scope.objects = [];
$scope.spots = new Array;
$scope.newPlace = {};
$scope.city = new String();
$scope.addPlace = function() {
$scope.places.push($scope.newPlace);
$scope.newPlace = {};
var request = *some query syntax, sorry for hiding*
$http.get(request).success(function(data) {
$scope.objects = data;
console.log($scope.objects.elements);
angular.forEach($scope.objects.elements, function(value, key) {
$scope.spots.push(value.tags.name);
});
// spots is ready, log it, do whatever
console.log($scope.spots);
});
}}] );
注意:使用$scope
意味着您不需要从html调用this
来引用控制器中定义的对象和函数。
一个例子:
<div ng-controller="PlaceController">
<!-- no need to call places.city, if you use $scope just write city -->
{{city}}
</div>
编辑 :您可能不应该使用JavaScript的for-in
,它的问题是它会迭代对象/数组的名称或索引 。
一个例子:
var someArray = ['a', 'b', 'c'];
for (i in someArray) {
console.log(i); // prints 0, 1, 2
console.log(someArray[i]); // prints 'a', 'b', 'c'
}
这不同于其他流行语言中的for-in / for-each实现。
无论如何,在这种情况下,我已经编辑了上面的代码以使用Angular的forEach
,这是一个更合适的解决方案(许多库实现了自定义的for-each函数来修复JS的怪异for-in
),您可以在Angular的文档中阅读更多内容
用纯JavaScript的另一种选择是,如果$scope.objects.elements
是一个数组,则使用map()
函数 ,如下所示:
$scope.spots = $scope.objects.elements.map(function(value) {
return value.tags.name; // value is an item in object.elements
});
尝试这个 ..
由于您的异步调用,您需要在成功内执行任务
$http.get(request).success(function(data) {
hotels.objects = data;
console.log(hotels.objects.elements);
for (each in hotels.objects.elements) {
hotels.spots.push(each.tags.name);
};
console.log(this.spots);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.