appelant une fonction dans le contrôleur angulaire de google api présent dans la vue

Question

j'utilise google places détails api. Donc, dans mon attribut src je mis google api qui a un rappel du nom initMap Voici le code

<div class="tab-pane active" id="timeline"> 
<p class="lead">Location</p> 
<hr> 
<div class="row"> 
    <div class="col-md-1"></div> 
    <div class="col-md-8"> 
    <h2><a href="#"></a> 
    <span>location <b style="color:black;"> kolkata</b></span></h2> 
     <p></p> 
     <div id="map" style="width:100%;height:400px;"></div> 
     <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places&callback=initMap"></script> 
    <p></p> 
    </div> 
    </div> 
</div> 

Dans le même html j'ai fonction écrit initMap

<script> 
function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 22.652687, lng: 88.376882}, 
     zoom: 15 
    }); 

    var infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 

    service.getDetails({ 
     placeId: 'ChIJvYbRT7Gd-DkR6QZQfJP9ZJg' 
    }, function(place, status) { 
     debugger 
     if (status === google.maps.places.PlacesServiceStatus.OK) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: place.geometry.location 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
      'Place ID: ' + place.place_id + '<br>' + 
      place.formatted_address + '</div>'); 
      infowindow.open(map, this); 
     }); 
     } 
    }); 
} 
</script> 

Cela fonctionne parfaitement aussi longtemps que cette fonction est présent dans l'étiquette de script. Comment appeler initMap à l'intérieur du contrôleur?

Answer 1

Lorsque vous créez une fonction dans votre page HTML, la fonction est automatiquement affectée à l'objet window, car il s'agit de la portée par défaut des scripts inclus dans la page.

donc de votre contrôleur, vous devriez être en mesure d'appeler simplement la fonction juste en utilisant: window.initMap();

Answer 2

Vous ne pouvez pas appeler cette façon mais vous charger le script en utilisant JavaScript dans votre contrôleur lorsque votre application est chargé en utilisant document.createElement('script'), puis brancher un écouteur d'événement onload puis l'ajouter à l'intérieur de l'étiquette d'en-tête head.

le plus probable:

var script = document.createElement('script'); 
script.src = 'google api script'; 
script.onload = function() { 
// your onload function 
$scope.onload(); 
$scope.$digest(); 
}; 

document.querySelector('head').appendChild(script); 

cette façon, vous avez le contrôle sur ce que des choses ng que vous voulez faire à chaque fois qu'il charge. espérons que cela aide