Onsen UI模态在angularjs中是不隐藏的

onsen ui modal is not hide in angularjs

本文关键字:隐藏 angularjs UI 模态 Onsen      更新时间:2023-09-26

我是angularjs和onsenui的新手,我在ajax请求中显示了一个模态,并在成功响应时隐藏它。现在一切都完成了,一切都很完美,但唯一的问题是,当我回到那个页面,模态显示,再也不会隐藏,请帮助我在哪里是我的错误,我的代码是

<ons-navigator animation="slide" var="gallery">  
<ons-page style="background: #FFFFFF url('images/splash-screen.png') repeat scroll 0 0 / cover;" class="homepage">
  <ons-toolbar style="height: 120px; padding-top: 10px;">
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-android-menu" fixed-width="false"></ons-icon></ons-toolbar-button>
    </div>
    <div class="center">
     <img src="images/logo.png" alt="Cayman After Work" style="max-width: 130px;"/> 

<!--  <ons-progress type="circular" indeterminate></ons-progress>-->
       <!-- <div class="" style="width: 100%; position: absolute; left:0; bottom: 0px;">
            <div class="search-box">
               <input type="search" class="search-input" placeholder="Search" >
               <i class="search-icon fa fa-search"></i>
               <button class="go" ng-click="gallery.pushPage('list-page.html');">GO</button>
            </div>    
        </div>-->
    </div>   
    <div class="right">
        <div class="" style="width: 100%;">
            <div class="search-box">
               <input type="search" class="search-input" placeholder="Search">
               <i class="search-icon fa fa-search"></i>
               <button class="go" ng-click="gallery.pushPage('list-page.html');">GO</button>
            </div>    
        </div>
    </div>
  </ons-toolbar>
   <ons-modal var="modal">
  <ons-icon icon="ion-load-c" spin="true"></ons-icon>
  <br><br>
  Please wait.<br>
</ons-modal>
    <div class="app-page" ng-controller="menuController">
    <div class="app-page-gallery three-cols category">      
      <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>      
    </div>   
  </div>
</ons-page>
</ons-navigator>  

js

app.controller('menuController', function ($http, $scope, $compile, $filter, $sce)
    {
        var Start = '0';
        var Pagesize = '10';
//         var catname = ' '; 
         modal.show();
             //  setTimeout('modal.hide()', 2000);
        $http({
            method: 'POST',
            url:  API_HOST+'/webservice/categorylist',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'caymanauth': caymanauth
            },
            data : "&Start=" + Start + "&Pagesize=" + Pagesize
        }).success(function ( data )
        {
           modal.hide();
            var i;
            var Content = ' ';
            var resid = ' ';
            var imglogo='';
            for (i = 0 ; i< data ['Details'].length ; i++)
            {
                imglogo= data['Details'][i]['varImage'] ;  
             resid=  + data['Details'][i]['intGlCode'] ;
             var startString = '<ons-row class="row ons-row-inner">';
             var endString  = "</ons-row>";
               if (Content === ' ')
               {
                   if ( imglogo==='' )
                   {
                       imglogo= "restorants1437580660.png";
                   }
                    Content = startString + '<ons-col width="33.33333333%" class="col ons-col-inner" style="-moz-box-flex: 0; flex: 0 0 33.3333%; max-width: 33.3333%;">'+
                            '<ons-button onclick=gallery.pushPage("list-page.html",{params:'+resid+'}); modifier="clean" class="ng-isolate-scope button effeckt-button button--clean slide-left"><span class="label ons-button-inner">'+
                            '<div class="icon-bg ng-scope">'+
                             '<img alt="Restaurant" src='+ API_HOST+'/upimages/businesscategory/images/'+ imglogo+'>'+
                            '</div>'+
                            '</span>'+
                            '<span class="spinner button__spinner button--clean__spinner"></span>'+
                            '</ons-button>'+
                            '<p class="cat-title">'+ data['Details'][i]['varName'] +'</p>'+
                            '</ons-col>';       
                }
                else
                {
                      if(i % 3 === 0)
                      {
                          Content += startString;
                      }

                      if ( imglogo==='' )
                   {
                      imglogo ="restorants1437580660.png";
                   }
                       Content +=   '<ons-col width="33.33333333%" class="col ons-col-inner" style="-moz-box-flex: 0; flex: 0 0 33.3333%; max-width: 33.3333%;">'+
                            '<ons-button onclick=gallery.pushPage("list-page.html",{params:'+resid+'}); modifier="clean" class="ng-isolate-scope button effeckt-button button--clean slide-left"><span class="label ons-button-inner">'+
                            '<div class="icon-bg ng-scope">'+
                             '<img alt="Restaurant" src='+ API_HOST+'/upimages/businesscategory/images/'+ imglogo+'>'+
                            '</div>'+
                            '</span>'+
                            '<span class="spinner button__spinner button--clean__spinner"></span>'+
                            '</ons-button>'+
                            '<p class="cat-title">'+ data['Details'][i]['varName'] +'</p>'+
                            '</ons-col>';
                       if(i % 3 === 2)
                      {
                          Content += endString;
                      }     
                  }
            }

            $scope.snippet = Content;
            $scope.deliberatelyTrustDangerousSnippet = function ()
            {

                return $sce.trustAsHtml($scope.snippet);
            };
        }).error(function(data, status, header, config) {
         // console.log("Error - " + status + ", Response Timeout.");
           ons.notification.alert({message: 'An error has occurred!'});
           // alert();

});
//$scope.alert = function() {
//   
//};
    });

能够使用modal show &正确隐藏,你应该在服务级别声明如下:

app.factory('service') {
     return {
        showSpinnerAuto : function() {
            modal.show();
            setTimeout('modal.hide()', 10000);
        },
        showSpinnerTimer : function(timer) {
            modal.show();
            setTimeout('modal.hide()', timer);
        },
        showSpinner : function() {
            modal.show();
        },
        hideSpinner : function() {
            modal.hide();
        }
    };
});

然后,在控制器中包含该服务:

app.controller('menuController', function (service, $http, $scope, $compile, $filter, $sce)
现在在你的控制器中,你应该可以使用:

service.showSpinner(); // for showing a modal and 
service.hideSpinner(); // for hiding a modal

希望有帮助!