Question

我是混合移动应用创建新手。我的用例非常简单。我有一个使用模板html的单一离子模态。

我想要的是根据一些记录数据使用不同的值填充相同的离子模板。基本上它是谷歌地图，点击任何标记，相同的模板应根据标记打开不同的值。

我的控制器代码 -

.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标记时，模态会正常打开，但我不知道如何将动态数据传递给pop模式。

Answer 1

因为你这样做：

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

您的模态可以访问控制器的范围。因此，如果您在控制器中声明任何变量，则可以通过模态访问它。

带有Ionic Modal动态数据的Google Markers

1 个答案: