当事件被触发时，PhoneGap和OnsenUI模态没有显示

PhoneGap and OnsenUI modal not showing up when event is fired

本文关键字：OnsenUI 模态 显示 PhoneGap 事件      更新时间：2023-09-26

我有一个应用程序，我可以点击列表项，并对它们采取行动。on-click事件会弹出一个对话框，询问用户是否确定是否要采取行动。点击确定后，一个模式应该显示一个旋转的齿轮图标，并在一切完成后消失。

如果我在浏览器中尝试它，它可以完美地工作，但我的iPhone或android上的PhoneGap模拟器没有显示它。

我有以下模式在我的index.html文件:

<ons-modal var="modal_update">
    <ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon>
    <br><br>
    Please wait
    <br>Updating data on the server...
</ons-modal>

我有一个点击事件，这带来了一个对话框与确定和取消作为可能的答案。如果用户点击OK，模态应该显示出来，当一切都完成时，它应该隐藏起来。在列表项旁边还有一个图标，它应该变成一个旋转齿轮…

所以我有以下代码:

$scope.confirm = function(item, id) {
    ons.notification.confirm({
        title:"",
        message: "Do you want to set this task to completed?",
        callback: function(idx) {
            switch(idx) {
                case 0: //if they hit CANEL
                    break;
                case 1: //if they hit OK
                    modal_update.show();
                    //PROCESSING DATA
                    //do things with the data
                    //Change icon to rotating gear 
                    //$scope.apply - i tried with and without this, nothing helped.
                    modal.hide();
                    break;
             }
         }
     });
 }

modal .show() &.hide()在其他地方工作，比如"下拉刷新"

我看到的唯一问题是您没有使用$scope访问模态，而是使用modal.hide()而不是modal_update.hide():

case 1: //if they hit OK
    $scope.modal_update.show();
    //PROCESSING DATA
    //do things with the data
    $scope.modal_update.hide();
    break;

它在这个Codepen中工作(我只是添加了一个超时来查看模式):http://codepen.io/frankdiox/pen/KdzwGR

希望有帮助!

相关文章：