[英]onsen ui modal is not hide in angularjs
我是angularjs和onsen ui的新手,我在ajax请求中显示了一个模式,并在成功的响应中将其隐藏。现在一切都完成了,一切顺利,但唯一的问题是当我回到该页面时,模式正在显示,再也不会隐藏了,请帮助我我的错误在哪里,我的代码是
HTML
<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() {
//
//};
});
为了能够正确使用模式显示和隐藏,您应该在服务级别中进行如下声明:
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
希望对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.