从谷歌地图自定义控件打开离子模态时遇到问题

Trouble opening ionic modal from google maps custom control

本文关键字:模态 遇到 问题 谷歌地图 自定义控件      更新时间:2023-09-26

我有一个带有自定义控件的谷歌地图,我希望它在单击时打开离子模态。我有另一个控件可以从地图上清除标记,并且工作正常。

如果我modal.show作为按钮的功能,当我单击它时,我会得到"无法读取未定义的属性'$$destroyed'"。

如果我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);
};

Ionic 中有两种实现模态的方法,如 Ionic - Javascript Modal 中给出的那样。

您可以添加单独的模板,也可以将其添加到常规 HTML 文件之上的脚本标记内。首先,您需要将模态连接到控制器,然后创建模态。之后,创建将触发的打开函数。最后,创建一个按钮来触发modal.show()打开模态。

示例 HTML 代码:

<button class = "button" ng-click = "openModal()"></button>