无法访问 angular.js 控制器中的变量

Question

这是我的控制器：

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 中。我该怎么办？

Answer 1

您正在发出一个异步请求来获取这些点，但您在它们完成之前记录它们。

更改 this.addPlace 以记录/作用于 promise 回调中的点数组：

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

Answer 2

您在 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's docs阅读更多内容

plain javascript 中的另一个选项是，如果$scope.objects.elements 是一个数组，则使用map() function，如下所示：

$scope.spots = $scope.objects.elements.map(function(value) {
    return value.tags.name; // value is an item in object.elements
});

Answer 3

试试这个..

由于您的异步调用，您需要在成功中执行任务

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