i'm using ons-modal show loading text , spinner icon when app fetching data. code follows:
<ons-modal var="loadingmodal"> <ons-icon icon="ion-load-c" spin="true"></ons-icon> <br><br> cargando... <br> </ons-modal> i can correctly show hide using loadingmodal.show(); , loadingmodal.hide();
but how know in angular if shown or hidden?
update
apparently not-so-elegant solution not not elegant after :d
here pull request shows method isshown() should available guess
internally function looks similar whats in answer
isshown() { return this.style.display !== 'none'; } not super elegant solution, works
if( $scope.loadingmodal._element.css('display') == 'none'){ // hidden }else{ // visible } <!doctype html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <title>modal | onsen ui</title> <link rel="stylesheet" href="https://rawgit.com/onsenui/onsenui/master/demo/styles/app.css"/> <link rel="stylesheet" href="https://rawgit.com/onsenui/onsenui/master/build/css/onsenui.css"> <link rel="stylesheet" href="https://rawgit.com/onsenui/onsenui/master/build/css/onsen-css-components.css"> <script src="https://rawgit.com/onsenui/onsenui/master/build/js/angular/angular.js"></script> <script src="https://rawgit.com/onsenui/onsenui/master/build/js/onsenui.js"></script> <script src="https://rawgit.com/onsenui/onsenui/master/demo/app.js"></script> <script> function check($el){ return $el.css('display') === 'none' ? 'hidden' : 'visible'; } angular.module('myapp').controller('pagecontroller', function($scope) { $scope.open = function() { $scope.app.modal.show(); alert(check($scope.app.modal._element)); settimeout(function() { $scope.app.modal.hide(); alert(check($scope.app.modal._element)); }, 2000); }; }); </script> </head> <body ng-controller="pagecontroller"> <ons-navigator> <ons-modal var="app.modal"> <ons-icon icon="ion-load-c" spin="true"></ons-icon> <br><br> cargando... <br> </ons-modal> <ons-toolbar> <div class="center">modal</div> </ons-toolbar> <p style="text-align: center"> <ons-button modifier="light" ng-click="open();">open modal</ons-button> </p> </ons-navigator> </body> </html>
Comments
Post a Comment