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