Warum ein ionisches Modal die Benutzeroberfläche einfriert, wenn sie geschlossen oder übergeben wird?

Question

Ich habe ein Popover, die zwei Optionen - Favorit hinzufügen und Kommentar hinzufügen -, die ersten Optionen funktionieren ordnungsgemäß: es friert die Benutzeroberfläche nicht ein; aber die zweite, sobald das Formular weggelassen oder übergeben wird, friert die Schnittstelle ein. Das ist, was passiert:

Beachten Sie, wie wenn ich das Formular schließen die Schnittstelle reagiert nicht.

Dies ist der Code, den ich verwendet habe den popover und und modal zu erstellen:

$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html',{ 
scope: $scope}) 
.then(function(popover){ 
    $scope.popover = popover; 
}); 

$scope.openPopover = function($event){ 
    $scope.popover.show($event); 
} 

$scope.closePopover = function() { 
    $scope.popover.hide(); 
}; 

$ionicModal.fromTemplateUrl('templates/dish-comment.html', { 
    scope: $scope 
}).then(function(modal) { 
    $scope.commentModal = modal; 
}); 

// Triggered in the reserve modal to close it 
$scope.closeAddComment = function() { 
    $scope.commentModal.hide(); 
}; 

// Open the reserve modal 
$scope.showCommentModal = function($event) { 
    $scope.closePopover(); 
    $scope.commentModal.show($event); 
}; 

Die Vorlage für dish-detail-popover.html:

<ion-popover-view> 
    <ion-content> 
     <div class="list"> 
     <a class="item" ng-click="addFavorite(dish.id)"> 
      Add to favorites 
     </a> 
     <a class="item" ng-click="showCommentModal()"> 
      Add Comment 
     </a> 
     </div> 
    </ion-content> 
</ion-popover-view> 

und die Vorlage für dish-comment.html:

<ion-modal-view> 
    <ion-header-bar> 
    <h1 class="title">Submit Comment on Dish</h1> 
    <div class="buttons"> 
     <button class="button button-clear" ng-click="closeAddComment()">Close</button> 
    </div> 
    </ion-header-bar> 
    <ion-content> 
    <form id="comentDishForm" name="comentDishForm" ng-submit="doComment()"> 
     <div class="list"> 
     <label class="item item-input item-select"> 
      <span class="input-label">Rating</span> 
      <select ng-model="comment.rating"> 
       <option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">{{n}}</option> 
      </select> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Your Name</span> 
      <input type="text" ng-model="comment.author"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Your Comment</span> 
      <input type="text" ng-model="comment.comment"> 
     </label> 
     <label class="item"> 
      <button class="button button-block button-positive" type="submit">Submit</button> 
     </label> 
     </div> 
    </form> 
    </ion-content> 
</ion-modal-view> 

HINWEIS: Whe Wenn das Formular über die Schaltfläche "Kommentar hinzufügen" (der grüne) aufgerufen wird, funktioniert es ordnungsgemäß. Der Fehler ist verbunden, wenn er aus dem Popover aufgerufen hat.

Einige Vorschläge oder Ideen, ... um das zu lösen?

Answer 1

Der Bildschirm wird eingefroren, da trotz des Schließens des Popover vor dem Öffnen des Modales der Body-Tag mit der Klasse "Popover-offen" verschmutzt bleibt. Eine schnelle Lösung, aber nicht die sauberste, besteht darin, das Popover beim Schließen des Modales wieder zu schließen. Auf diese Weise entfernt das ionische Framework die Klasse "popover-open" aus dem body-Tag. Beispiel:

$scope.$on('modal.hidden', function() { 
    $scope.closePopover(); 
}); 

Ich hoffe, es hilft.

Answer 2

Ich lief auch in das gleiche Problem und hatte keine Ahnung, warum das passierte. Als ich die ionischen Dokumente über ionicPopover las, stellte ich fest, dass die Methode tatsächlich ein Versprechen zurückgibt, das aufgelöst wird, sobald das Popover ausgelebt ist. Also, was Sie tatsächlich tun, ist Setup Ihre closePopover() Methode wie folgt:

$scope.closePopover = function() { 
    return $scope.popover.hide(); 
}; 

Was das Verfahren ausgeführt wird, wenn jemand die „Kommentar hinzufügen“ Option klickt, können Sie das wie folgt implementieren:

$scope.addComment = function addComment() { 
    $scope.closePopover() 
     .then(function() { 
     $scope.openAddCommentModal(); 
     }); 
}; 

Dadurch wird sichergestellt, dass das Modal nur angezeigt wird, wenn das Popover vollständig animiert ist und diese Klassen aus dem Tag body entfernt wurden. Dadurch werden die schmutzigen Zustände gelöscht und die App reagiert.