Google Marqueurs avec des données dynamiques pour Ionic Modal

Question

Je suis nouveau dans la création d'applications mobiles hybrides. Et mon cas d'utilisation est très simple. J'ai un seul modal ionique en utilisant le modèle html. Ce que je veux est peupler le même modèle ionique avec différentes valeurs basées sur quelques données d'enregistrements. Fondamentalement, il s'agit d'une carte Google et sur un clic sur l'un des marqueurs, le même modèle devrait ouvrir avec des valeurs différentes en fonction du marqueur.

Mon code de contrôleur -

.controller('MyLocationCtrl', function(
     $scope, 
     $stateParams, 
     force, 
     $cordovaGeolocation, 
     $ionicModal, 
     GoogleMapService, 
     ForceService, 
     $q 
    ) { 
     console.log('this is in my location page'); 
     var currentPosition = GoogleMapService.getCurrentLocation(); 

     var restaurantModal = $ionicModal.fromTemplateUrl('templates/bottom-sheet.html', { 
      scope: $scope, 
      viewType: 'bottom-sheet', 
      animation: 'slide-in-up' 
     }); 

     var allContacts = ForceService.getAllContactsWithGeo(); 
     var promises = []; 
     promises.push(currentPosition); 
     promises.push(allContacts); 
     promises.push(restaurantModal); 

     var allMarkers = []; 
     var allContactDetails = []; 
     currentPosition.then(
      function(position) { 
      console.log('position data -->', position); 
      var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

      var mapOptions = { 
       center: latLng, 
       zoom: 15, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions); 
      var bounds = new google.maps.LatLngBounds(); 

      allContacts.then(
       function(contacts) { 

       console.log('contacts final -->', contacts); 
       for (var i=0; i<contacts.records.length; i++) { 
        var contact = contacts.records[i]; 
        console.log('single contact -->', contact.MailingLatitude, contact.MailingLongitude); 
        var contactlatLng = new google.maps.LatLng(contact.MailingLatitude, contact.MailingLongitude); 
        var contactInfo = {}; 
        //contactInfo.marker = {}; 
        var marker = new google.maps.Marker({ 
        map: $scope.map, 
        animation: google.maps.Animation.DROP, 
        position: contactlatLng 
        }); 

        contactInfo.marker = marker; 
        contactInfo.recordDetails = contact; 

        allMarkers.push(marker); 
        allContactDetails.push(contactInfo); 

        // Set boundary for markers in map 
        bounds.extend(contactlatLng); 
       } 

       // Fit map based on markers 
       $scope.map.fitBounds(bounds); 
       } 
      ); 


      // google.maps.event.addListenerOnce($scope.map, 'idle', function(){ 

      // }); 

      }, 
      function(error) { 
      console.log("Could not get location" + error); 
      } 
     ); 

     // Add listener for marker pop up once all promises resolved 
     $q.all(promises).then(
      function(values) { 
      console.log('first -->', values[0]); 
      console.log('second -->', values[1]); 
      console.log('third -->', values[2]); 
      var detailModal = values[2]; 

      $scope.modal = detailModal; 
      for (var i=0; i<allContactDetails.length; i++) { 


       allContactDetails[i].marker.addListener('click', function() { 

       console.log('helllos from marker'); 
       console.log('all contactInfo -->', allContactDetails[i].recordDetails.Name); 
       $scope.contactName = allContactDetails[i].recordDetails.Name; 
       detailModal.show(); 
       }); 
      } 
      } 
     ); 

    }) 

code modèle frontal -

<script id="templates/bottom-sheet.html" type="text/ng-template"> 
     <ion-bottom-sheet-view> 
     <ion-header-bar align-title="left"> 
      <h1 class="title">New Particle</h1> 
      <button class="button button-icon icon ion-android-close" ng-click="modal.hide()"></button> 
      {{contactName}} 
     </ion-header-bar> 
     </ion-bottom-sheet-view> 
    </script> 

Maintenant, le modal ouvre correctement lorsque je clique sur le marqueur google, mais je ne suis pas sûr de savoir comment passer des données dynamiques à la modale pop.

Answer 1

Depuis que vous faites ceci:

var restaurantModal = $ionicModal.fromTemplateUrl('templates/bottom-sheet.html', { 
     scope: $scope, 
     viewType: 'bottom-sheet', 
     animation: 'slide-in-up' 
    }); 

Votre modal peut accéder à la portée de votre contrôleur. Donc, si vous déclarez une variable dans votre contrôleur, elle sera accessible via le modal.