[英]Show MODAL in onsen ui while data is fetching in angularjs
I am trying to fetch data from server. 我正在尝试从服务器获取数据。 Since its fetching i want to show a modal till its not loaded completely.
自从获取以来,我想显示一个模态,直到未完全加载。
Here is what i am using. 这是我正在使用的。
<ons-page ng-controller="directoryControl">
<ons-modal var="modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Please wait.<br>Closing in 2 seconds.
</ons-modal>
<ons-list>
<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
<ons-row>
<ons-col>
<div class="name">
{{PostCategory.title}}
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
There is how my modal looks like in angularjs. 我的模态在angularjs中是这样的。
var module = angular.module('app', ['onsen']);
module.controller('directoryControl', function($scope, $http) {
ons.ready(function() {
//console.log($scope.username + ", " + $scope.password);
modal.show();
var responsePromise = $http.get("http://www.mywebsitepadth.com/api/get_category_index/");
responsePromise.success(function(data, status, headers, config) {
modal.hide();
});
responsePromise.error(function(data, status, headers, config) {
alert("ajax didnt work");
});
});
});
May i know why this is not displaying the modal when i am doing it modal.show();
我可以知道为什么我在执行
modal.show();
时不显示模式modal.show();
? ?
Thank you! 谢谢!
Make your model direct child of body like this. 这样使您的模特身材直子。
<body>
<ons-modal var="modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Please wait.<br>Closing in 2 seconds.
</ons-modal>
This way you'll be able to access modal anywhere in your any controller. 这样,您将可以在任何控制器中的任何位置访问模式。 Now your controller should be like this.
现在您的控制器应该是这样的。
module.controller('directoryControl', function($scope, $http) {
//console.log($scope.username + ", " + $scope.password);
modal.show();
var responsePromise = $http.get("http://www.mywebsitepadth.com/api/get_category_index/");
responsePromise.success(function(data, status, headers, config) {
modal.hide();
});
responsePromise.error(function(data, status, headers, config) {
alert("ajax didnt work");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.