Popover Ionic funziona su XCode Simulator ma non su iPhone

Question

Ho un Pop Up Ionic sulla mia app. Il popover appare quando eseguo il servizio ionico, ios emulare ionico e il simulatore XCode. Tuttavia, non appena riesco a simulare l'app sul mio iPhone 4S su XCode o utilizzare l'app Ionic View per visualizzare la mia applicazione, il popover non appare. Ho eseguito il debug di TUTTO e il codice non funziona. Nessun errore appare sulla mia console durante l'esecuzione dell'app.

Una volta in una luna blu il popover apparirà sul mio 4S, ma non c'è alcuna logica su come appare il popover. Vorrei cambiare un pezzo di codice, appare il popover, poi quando lo cambio di nuovo, il popover scompare. Ripeto questo processo e ritorna alla mia vecchia versione di codice che funzionava e non funziona. Questo è frustrante. Quel che è peggio, temo che nessuno risponda a questo messaggio. Qualsiasi aiuto sul motivo per cui esiste una discrepanza tra il simulatore di iPhone e il mio iPhone reale sarebbe fantastico. Grazie.

HTML Button

<div ng-controller="FilterPopoverController as filterPopover" class="text-right"> 
     <div on-tap="filterPopover.open()" ng-class="{filterButtonOpened: filterPopover.opened}" id="filter-button"> 
     <span class="assertive" > 
      <i class="icon ion-arrow-down-b"></i> 
      <span class="bold">FILTER</span> 
     </span> 
     </div> 
    </div> 

Popover HTML

<ion-popover-view id="filterPopover"> 
    <ion-header-bar class="bar-dark"> 
    <h1 id="popoverTitle" class="bold">FILTER BY</h1> 
    </ion-header-bar> 

    <ion-content> 
    <p>Content here</p> 
    </ion-content> 
</ion-popover-view> 

Il controller Popover

.controller('FilterPopoverController', filterPopoverController) 

filterPopoverController.$inject = ['$ionicPopover', '$filter', '$scope', '$timeout']; 

function filterPopoverController($ionicPopover, $filter, $scope, $timeout) { 
    var vm = this; 

    vm.open = open; 

    vm.popover = null; 

    vm.opened = false; 

    activate(); 

    //Cleanup the popover when we're done with it! 
    $scope.$on('$destroy', function() { 
    vm.popover.remove(); 

    vm.opened = false; 
    }); 

    $scope.$on('popover.hidden', function() { 
    vm.opened = false; 
    }); 

    function activate() { 
    $ionicPopover.fromTemplateUrl('/templates/search/filter-popover.html', { 
     scope: $scope 
    }).then(function(popover) { 
     vm.popover = popover; 
    }); 
    } 



    function open() { 
     vm.opened = true; 

     vm.popover.show(); 
    } 
} 

ho dovuto rimuovere informazioni sensibili da parte di questo codice, ma questo è il succo del discorso di esso.

Answer 1

Ho fatto due modifiche al codice scritto: primo è quello di modificare il percorso del modello di popover essere:

'templates/search/filter-popover.html' 

invece di

'/templates/search/filter-popover.html' 

È necessario fare riferimento questo file a partire dalla directory corrente anziché dalla directory radice

La seconda modifica è passare l'input $event durante l'apertura del popover, questo è da documentazione ufficiale di ionic Popover

Dopo l'applicazione di entrambe queste modifiche al codice scritto, riesco a vedere popover sul browser desktop, simulatore di ios, vero e proprio iPhone 4 consistenly

Ecco il codice finale:

angular.module('starter', ['ionic']) 
 

 
.run(function($ionicPlatform) { 
 
    $ionicPlatform.ready(function() { 
 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
 
    // for form inputs) 
 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
 
    } 
 
    if(window.StatusBar) { 
 
     StatusBar.styleDefault(); 
 
    } 
 
    }); 
 
}) 
 

 
.controller('FilterPopoverController', filterPopoverController) 
 

 
filterPopoverController.$inject = ['$ionicPopover', '$filter', '$scope', '$timeout']; 
 

 
function filterPopoverController($ionicPopover, $filter, $scope, $timeout) { 
 
    var vm = this; 
 

 
    vm.open = open; 
 

 
    vm.popover = null; 
 

 
    vm.opened = false; 
 

 
    activate(); 
 

 
    //Cleanup the popover when we're done with it! 
 
    $scope.$on('$destroy', function() { 
 
    vm.popover.remove(); 
 

 
    vm.opened = false; 
 
    }); 
 

 
    $scope.$on('popover.hidden', function() { 
 
    vm.opened = false; 
 
    }); 
 

 
    function activate() { 
 
    $ionicPopover.fromTemplateUrl('templates/search/filter-popover.html', { 
 
     scope: $scope 
 
    }).then(function(popover) { 
 
     vm.popover = popover; 
 
    }); 
 
    } 
 

 

 

 
    function open($event) { 
 
     vm.opened = true; 
 

 
     vm.popover.show($event); 
 
    } 
 
}

<div ng-controller="FilterPopoverController as filterPopover" class="text-right"> 
 
    <div on-tap="filterPopover.open($event)" ng-class="{filterButtonOpened: filterPopover.opened}" id="filter-button"> 
 
    <span class="assertive" > 
 
     <i class="icon ion-arrow-down-b"></i> 
 
     <span class="bold">FILTER</span> 
 
    </span> 
 
    </div> 
 
</div>

spero che questo risolve il problema.