Googleマップのカスタムコントロールからイオンモダルを開くときに問題が発生する

Question

私はカスタムコントロール付きのGoogleマップを持っていて、クリックするとイオンモダルを開くようにしたい。マップからマーカーをクリアする別のコントロールがあり、正常に動作しています。

ボタンの機能として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); 
}; 

Answer 1

からIonic - Javascript Modalで与えられるイオンでモーダルを実装するには2つの方法があります。

別のテンプレートを追加することも、スクリプトタグ内の通常のHTMLファイルの上に追加することもできます。まず、モーダルをコントローラに接続し、次にモーダルを作成する必要があります。その後、起動する関数を作成してトリガーします。最後に、modal.show()を起動してモーダルを開くボタンを作成します。

サンプルHTMLコード：

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