Проблема с открытием ионного модального режима из пользовательского элемента управления Google Maps

0

У меня есть карта google с настраиваемым элементом управления, и я хочу, чтобы она открывала ионный модальный щелчок. У меня есть другой элемент управления, который очищает маркеры от карты и работает нормально.

Если я ставлю modal.show как функцию для кнопки, я получаю "Не могу прочитать свойство" $$ destroy "неопределенного", когда я нажимаю на него.

Если я установлю modal.show() модальный открывается, когда страница загружается, чего я не хочу, а затем не откроется снова, когда я нажимаю кнопку.

контроллер

.controller('MapCtrl', function(mapServ, mapFact, $ionicModal, $scope){
  var vm = this;

  var gmap = mapServ.init();
  var markers = mapServ;

  // Create modal and Custom Map Controls
  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    vm.modal = modal;

    var controlContainer = document.createElement('div');
    var clearControl = new mapFact.Control(controlContainer, 'Clear Map', mapFact.clearMap);
    var locControl = new mapFact.Control(controlContainer, 'Locations', vm.modal.show());

    controlContainer.index = 1;
    gmap.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlContainer);
  });

   // Create Markers
   mapFact.markers($rootScope.rests, gmap).then(function(results) {
   mapServ.markers = results;
   vm.markers = mapServ.markers;
 });
});

С фабрики

// Button Constructor
map.Control = function(controlDiv, text, func) {
  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#ed5929';
  controlUI.style.border = '2px solid #ed5929';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.marginRight = '22px';
  controlUI.style.marginTop = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to toggle markers';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(255,255,255)';
  controlText.style.fontWeight = 'bold';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = text;
  controlUI.appendChild(controlText);
  controlUI.addEventListener('click', func);
};
  • 0
    Уточните, пожалуйста, какого выхода вы хотите добиться? Во-первых, вы сказали: «Я хочу, чтобы при щелчке по нему открывался ионный модал», но вы также сказали «Если я добавлю modal.show (), модал откроется при загрузке страницы, чего я не хочу». И не могли бы вы также поделиться журналами ошибок при использовании modal.show() ? :)
  • 0
    Извините, если мне не ясно. Я хочу, чтобы кнопка открывала модальное окно, но я не хочу, чтобы она открывалась автоматически при загрузке страницы. Когда я использую modal.show() ошибок не modal.show() просто открывается модальный при загрузке страницы, а при нажатии кнопки ничего не происходит.
Теги:
ionic-framework
google-maps

1 ответ

0

Существует два способа реализации модального в ионике, как указано в Ionic - Javascript Modal.

Вы можете либо добавить отдельный шаблон, либо добавить его поверх обычного HTML файла, внутри тегов скриптов. Во-первых, вам нужно подключить свой модальный к контроллеру, а затем создать модальный. После этого создайте функции для открытия, которые будут активированы. Наконец, создайте кнопку, чтобы вызвать modal.show() чтобы открыть модальный.

Пример кода HTML:

<button class = "button" ng-click = "openModal()"></button>
  • 0
    Спасибо вам за ваши предложения. Я смог открыть ионный модал без проблем, хотя. Проблема заключается в присоединении modal.show() к кнопке карты Google. Моя другая кнопка Google Map работает нормально, но та, что открывает модал, работает не так, как ожидалось.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню