温泉UI模式在angularjs不隐瞒 [英] onsen ui modal is not hide in angularjs
本文介绍了温泉UI模式在angularjs不隐瞒的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手，angularjs和温泉UI，我都表现出Ajax请求一个模式和隐藏它全成response.now全部完成，并打算perfectlymbut唯一的问题是，当我回来的那一页，模态显示，从来没有再次隐藏，请帮我哪里是我的错，我的code是
HTML
＆LT; ONS-导航动画=幻灯片VAR =画廊＆GT;
＆LT; ONS-页面样式=背景：#FFFFFF URL（图像/防溅screen.png'）重复滚动0 0 /套;类=主页＆GT;
＆LT; ONS-工具栏风格=高度：120像素;填充顶：10px的;＆GT;
＆LT; DIV CLASS =左＆GT;
＆LT; ONS-工具栏按钮NG点击=menu.toggle（）＆GT;＆LT;附件图标图标=离子Android系统菜单中的固定宽度=false的＆GT;＆LT; /附件图标＆GT; ＆LT; / ONS-工具栏按钮＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =中心＆GT;
＆LT; IMG SRC =图像/ logo.pngALT =开曼后做事的风格=最大宽度：130px;/＆GT;＆LT;！ - ＆LT; ONS-进步型=圆不确定＆GT;＆LT; / ONS-进步＆GT; - ＆GT;
！＆LT; - ＆LT; DIV CLASS =的风格=宽度：100％;仓位：绝对的;左：0;底部：0像素;＆GT;
＆LT; DIV CLASS =搜索框＆GT; ＆LT;输入类型=搜索级=搜索输入占位=搜索＆GT;
＆LT; I级=搜索图标发FA-搜索＆GT;＆LT; I＆GT /;
＆LT;按钮类=走出去NG点击=gallery.pushPage（名单-page.html即可'）;＆GT; GO＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; - ＆GT; ＆LT; / DIV＆GT;
＆LT; DIV CLASS =右＆GT;
其中p DIV CLASS =的风格=宽度：100％;＆GT;
＆LT; DIV CLASS =搜索框＆GT;
＆LT;输入类型=搜索级=搜索输入占位=搜索＆GT;
＆LT; I级=搜索图标发FA-搜索＆GT;＆LT; I＆GT /;
＆LT;按钮类=走出去NG点击=gallery.pushPage（名单-page.html即可'）;＆GT; GO＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; / ONS-工具栏＆GT;
＆LT; ONS-VAR模式=模式＆GT;
＆LT;附件图标图标=离子负载-C旋转=真＆GT;＆LT; /附件图标＆GT;
＆LT; BR＆GT;＆LT; BR＆GT;
请等待＆LT; BR＆GT;
＆LT; / ONS-模式＆GT;
＆LT; DIV CLASS =应用程序页面NG控制器=menuController＆GT; ＆LT; DIV CLASS =应用程序页面图库三COLS类别＆GT; ＆LT; DIV NG绑定-HTML =deliberatelyTrustDangerousSnippet（）＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /附件页＆GT;
＆LT; / ONS-导航＆GT;
JS
app.controller（'menuController'，函数（$ HTTP，$范围，$编译，$过滤器，$ SCE）
{
VAR开始='0';
变种每页='10';
// VAR catname ='';
modal.show（）;
//的setTimeout（'modal.hide（），2000年）;
$ HTTP（{
方法：POST，
网址：API_HOST +'/ Web服务/所属分类'，
标题：{
内容类型：应用程序/ x-WWW的形式urlen codeD，
caymanauth'：caymanauth
}，
数据：＆放大器;启动=+开始+＆放大器;每页=+每页 }）。成功（功能（数据）
{
modal.hide（）; VAR我;
VAR内容='';
VAR渣油='';
VAR imglogo ='';
对于（i = 0; I＆lt;数据['详细']长度;我+ +） { imglogo =数据['详细'] [I] ['varImage'];
渣油= +数据['详细'] [I] ['intGl code'];
VAR startString ='＆LT;附件行级=行ONS-行内＆GT;';
VAR endString =＆LT; /附件行＆gt;中; 如果（内容===''）
{
如果（imglogo ===''）
{ imglogo =restorants1437580660.png;
} 内容= startString +'＆LT; ONS-COL宽度=33.33333333％级=山坳ONS-COL-内的风格= - MOZ盒-FLEX：0;弯曲：0 0 33.3333％;最大宽度：33.3333 ％;＆GT;'+
'＆LT;附件按钮的onclick = gallery.pushPage（名单-page.html即可，{params：一个'+渣油+'}）;修改=干净级=NG-分离范围的按钮effeckt键式按钮 - 干净的玻片左＆GT;＆LT;跨度类=标签项键式内＆GT;'+
'＆LT; DIV CLASS =图标-BG NG-范围＆GT;'+
'＆LT; IMG ALT =餐厅SRC ='+ API_HOST +'/ upimages / businesscategory /图片/+ imglogo +'＆GT;'+
'＆LT; / DIV＆GT;'+
'＆LT; / SPAN＆GT;'+
'＆LT;跨度类=微调button__spinner按钮 - clean__spinner＆GT;＆LT; / SPAN＆GT;'+
'＆LT; /附件按钮＆GT;'+
'＆LT; p =类猫标题＆GT;'+数据['详细'] [I] ['的varName'] +'＆LT; / P＆GT;'+
'＆LT; / ONS-COL＆GT;';
}
其他
{
如果（ⅰ％3 === 0）
{
内容+ = startString;
}
如果（imglogo ===''）
{ imglogo =restorants1437580660.png;
}
内容+ ='＆LT; ONS-COL宽度=33.33333333％级=山坳ONS-COL-内的风格= - MOZ盒-FLEX：0;弯曲：0 0 33.3333％;最大宽度：33.3333％ ;＆GT;'+
'＆LT;附件按钮的onclick = gallery.pushPage（名单-page.html即可，{params：一个'+渣油+'}）;修改=干净级=NG-分离范围的按钮effeckt键式按钮 - 干净的玻片左＆GT;＆LT;跨度类=标签项键式内＆GT;'+
'＆LT; DIV CLASS =图标-BG NG-范围＆GT;'+
'＆LT; IMG ALT =餐厅SRC ='+ API_HOST +'/ upimages / businesscategory /图片/+ imglogo +'＆GT;'+
'＆LT; / DIV＆GT;'+
'＆LT; / SPAN＆GT;'+
'＆LT;跨度类=微调button__spinner按钮 - clean__spinner＆GT;＆LT; / SPAN＆GT;'+
'＆LT; /附件按钮＆GT;'+
'＆LT; p =类猫标题＆GT;'+数据['详细'] [I] ['的varName'] +'＆LT; / P＆GT;'+
'＆LT; / ONS-COL＆GT;';
如果（ⅰ％3 === 2）
{
内容+ = endString;
}
}
}
$ scope.snippet =内容;
$ scope.deliberatelyTrustDangerousSnippet =功能（）
{ 返回$ sce.trustAsHtml（$ scope.snippet）;
};
}）错误（功能（数据，状态，头，配置）{ //执行console.log（错误 - +状态+，响应超时。）;
ons.notification.alert（{消息：'发生错误'}）;
//警报（）;}）;//$scope.alert =功能（）{
//
//};
}）;
解决方案
要能够使用模式的显示和放大器;隐藏得当，你应该在服务级别声明象下面这样：
app.factory（'服务'）{
返回{
showSpinnerAuto：功能（）{
modal.show（）;
的setTimeout（'modal.hide（），10000）;
}，
showSpinnerTimer：功能（定时器）{
modal.show（）;
的setTimeout（'modal.hide（）'，计时器）;
}，
showSpinner：功能（）{
modal.show（）;
}，
hideSpinner：功能（）{
modal.hide（）;
}
};
}）;
然后，包括服务在您的控制器：
app.controller（'menuController'，功能（服务，$ HTTP，$范围，$编译，$过滤器，$ SCE）
现在在你的控制器，你应该能够使用：
service.showSpinner（）; //用于显示一个模态
service.hideSpinner（）; //隐藏模态
希望帮助！
I am newbie to angularjs and onsen ui,I have shown a modal in ajax request and hiding it on successfull response.now all is done and going perfectlymbut only issue is when i come back to that page,modal is showing and never hide again,pls help me where is my mistake,my code is
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() {
//
//};
});
解决方案
To be able to use modal show & hide properly, you should declare in service level like below:
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();
}
};
});
Then, include the service in your controller:
app.controller('menuController', function (service, $http, $scope, $compile, $filter, $sce)
Now in your controller, you should be able to use:
service.showSpinner(); // for showing a modal and
service.hideSpinner(); // for hiding a modal
Hope that help!
这篇关于温泉UI模式在angularjs不隐瞒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
