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

Я новичок в создании гибридных мобильных приложений. И мой вариант использования очень прост. У меня есть один ионный модал с использованием шаблона 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();
              });
            }
          }
        );

    })

Код шаблона внешнего интерфейса -

<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, но я не уверен, как передать динамические данные во всплывающее модальное окно.


person Kaushik Ray    schedule 05.08.2016    source источник


Ответы (1)


Поскольку вы делаете это:

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

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

person e666    schedule 05.08.2016