函数内的 HTTP 请求不起作用

Question

我有这个用于 AngularJS 框架的控制器。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {


 var locations =[]; var map; var markers = [];

$scope.mappa = function(){
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.507033, lng: 15.080257}, 
        zoom: 8
      });
}

$scope.insert = function(){

         $http.get("http://localhost:8080/SistemiDistribuiti/rest/Point/Trovati")
    .success(function(data) 
            {locations = data;});

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
             position: new google.maps.LatLng(locations[i][0], locations[i][1]),
             map: map
        });
        markers.push(marker);
    }

    for (i = 0; i<markers.length; i++){
     markers[i].setVisible(true);
   }
};

在 html 文件中，我有一个调用插入函数的按钮。 但是，如果我运行此代码，则该按钮仅在第二次起作用。相反，如果 http 请求不在功能范围内，则该按钮会立即起作用。为什么？

$http.get("http://localhost:8080/SistemiDistribuiti/rest/Point/Trovati")
.success(function(data) 
        {locations = data;});

$scope.insert = function(){

var marker, i;

for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][0], locations[i][1]),
         map: map
    });
    markers.push(marker);
}

for (i = 0; i<markers.length; i++){
 markers[i].setVisible(true); }
};

Answer 1

这是异步方法。将代码插入到回调成功中。

$http.get("http://localhost:8080/SistemiDistribuiti/rest/Point/Trovati")
.success(function(data) {
    var marker, i;

    for (i = 0; i < data.length; i++) {  

        marker = new google.maps.Marker({
             position: new google.maps.LatLng(data[i][0], data[i][1]),
             map: map
        });

        markers.push(marker);
    }

    for (i = 0; i<markers.length; i++){
        markers[i].setVisible(true); }
    }
});

Answer 2

但是如果我运行这段代码，按钮只会在第二次起作用。

它在第一次工作，它只是 AJAX 请求是异步的，所以 location 变量在您尝试使用它时尚未填充。下次点击时，原来数据已经加载完毕，location被设置并“缓存”了。

你需要在回调函数中做你的事情：

$scope.insert = function () {

    $http.get("http://localhost:8080/SistemiDistribuiti/rest/Point/Trovati").success(function (data) {
        var marker, i, locations = data;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][0], locations[i][1]),
                map: map
            });
            markers.push(marker);
        }

        for (i = 0; i < markers.length; i++) {
            markers[i].setVisible(true);
        }       
    });

};

最后，当你让它工作时，考虑将你的请求逻辑移动到可重用的服务中，在控制器中发出请求并不是最好的设计：

$scope.insert = function () {
    locations.get().then(function(data) {
        var marker, i, locations = data;
        // ...
    });
};