Google Маркеры с динамическими данными для Ionic Modal

Question

Я новичок в создании мобильных мобильных приложений. И мой пример использования очень прост. У меня есть один ионный модальный с использованием шаблона html.

Что я хочу - это заполнение одного и того же ионного шаблона различными значениями, основанными на данных некоторых записей. В основном это карта google и щелчок по любому из маркеров, тот же шаблон должен открываться с разными значениями на основе маркера.

Мой код контроллера -

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

    }) 

Front код конца шаблона -

<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> 

Теперь модальное открывается должным образом, когда я нажимаю на маркер Google, но я не знаю, как передать динамические данные к популярному модальному.

Answer 1

Так как вы делаете это:

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

Ваш модальный может получить доступ к области вашего контроллера. Итак, если вы объявите какую-либо переменную в своем контроллере, она будет доступна через модальную.