不能访问angular.js控制器中的变量
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
更改为log/act在承诺回调中的斑点数组:
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
数组,将调用移动到回调内部的push:
$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>
EDIT:你可能不应该使用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的docs
中阅读更多内容。另一个选项,在纯javascript中,如果$scope.objects.elements
是一个数组,使用map()
函数,如下所示:
$scope.spots = $scope.objects.elements.map(function(value) {
return value.tags.name; // value is an item in object.elements
});
try this .
由于你的异步调用,你需要执行任务内成功
$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);
});
相关文章:
- 为什么不't我的变量在我的控制器中填充后在我的视图中呈现
- angularjs:访问angular控制器中的jquery变量
- 如何将一个变量从一个控制器传递到合金中的另一个控制器
- 将方法从控制器注入到未使用右变量调用的指令
- $Scope变量在HTML中不更新,尽管在控制器中不断更新
- 试图将一个局部变量传递给我的ngAside控制器
- 共享变量和多个控制器AngularJS
- 在控制器之间传递变量的最佳方式
- 控制器无法访问Angular Service变量
- 如何从jQuery设置控制器或全局变量的属性
- 为什么我们将控制器变量设置为等于“0”;这个“;在角度上
- 将外部控制器的范围变量设置为角度
- 将Scope变量作为指针发送,并在控制器外部对其进行更改
- AngularJS:如何与其他控制器共享作用域函数和变量
- AngularJS更新控制器变量并再次渲染视图
- 作用域变量未从状态父控制器继承到子控制器
- 具有范围变量的控制器不工作
- AngularJS:如何在控制器之间传递变量
- 我可以将变量控制器函数传递给指令中的函数链接吗?
- 如何使用函数将值更改为作用域中的全局变量?(“控制器”)