不能访问angular.js控制器中的变量

Can't access variable inside angular.js controller

本文关键字:变量 控制器 js 访问 angular 不能      更新时间:2023-09-26

这是我的控制器

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);
    });