I have two type of spinner in ionic 1 framework. The ionic spinner originally has the dark background. Therefore, I turn it off with the code below.
app.js
.constant('$ionicLoadingConfig', { noBackdrop: true, //duration: 1800, animation: 'fade-in', template: '<ion-spinner icon="crescent" class="spinner-energized"></ion-spinner>', }) app.css
.loading{ background-color:transparent!important; } However, I need a page with a different from others spinner. Only for the page special.js where I want the spinner with the original dark background. However, with the code I set, the spinner setting at app.js is overwrite.
special.js
$scope.$on("$ionicView.afterEnter", function (event, data) { $ionicLoading.show({ noBackdrop: true, duration: 1888, template: '<ion-spinner icon="dots" class="spinner-balanced"></ion-spinner> <br/>Analyzing' }); $scope.watchLists = $watcherFactory.getWatchLists(); $scope.currentWatchList = window.localStorage.getItem('currentWatchList'); console.log($scope.currentWatchList); if ($scope.watchLists.length > 0) $scope.getWatchedStocks(); else { $ionicLoading.hide(); $scope.currentWatchList = "_"; } special.css
.loading{ background-color:black!important; } How to make the spinner in special.css limited to that page only and not overwrite all the spinner?
Currently, background is set to black for all spinner
The spinner that I wanted when app.js loading is (orange color, it is not that obvious) 
The spinner that I wanted when special.js loading is 
Note that in the mobile app, user will jump from page to another page and I just want the special.js page to have the spinner with dark background. app.js spinner is consider the default spinner in the app except when special.js is called.
Update:(kite.js.org)
app.css
.loading { background-color:transparent!important; } .special-page .loading { background-color:black!important; } special.js
$rootScope.isSpecial = true; $scope.$on('$destroy', function() {delete $rootScope.isSpecial}); $scope.$on("$ionicView.afterEnter", function (event, data) { $ionicLoading.show({ noBackdrop: true, duration: 1888, template: '<ion-spinner icon="dots" class="spinner-balanced"></ion-spinner> <br/>Analyzing' }); $scope.watchLists = $watcherFactory.getWatchLists(); $scope.currentWatchList = window.localStorage.getItem('currentWatchList'); console.log($scope.currentWatchList); if ($scope.watchLists.length > 0) $scope.getWatchedStocks(); else { $ionicLoading.hide(); $scope.currentWatchList = "_"; } } ); The default spinner shows transparent background but the spcial.js still show tansparent background instead of black
2 Answers
Answers 1
$ionicLoading appends div.loading-container to <body>, I can not simply use a single selector to control it over different pages; therefore the problem becomes how I can change <body>'s class when special page is entered, my solution is not elegant, but suppose to work:
- add a ngClass to body:
<body ng-class="{'special-page': isSpecialPage}">, it will be triggered whenisSpecialPageis true - inject
$rootScopefor the controller of special.js, and:- put
$rootScope.isSpecialPage = trueat the beginning of controller, so<body>will have aspecial-pageclass when this page (ui state) is entered - listen to
$destroyevent, change$rootScope.isSpecialPage = false, sospecial-pageis removed when scope is destroyed (state changed)
- put
$scope.$on('$destroy', function() { $rootScope.isSpecialPage = false; });
- now you can write css like:
.loading { background-color:transparent!important; } .special-page .loading { background-color:black!important; }
Add minimal sample:
angular.module('ionicApp', ['ionic']) .controller('AppCtrl', function($scope, $timeout, $ionicLoading, $rootScope) { function showLoading() { // Setup the loader $ionicLoading.show({ content: 'Loading', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 }); $timeout(function () { $ionicLoading.hide(); $scope.msg = 'content loaded ' + new Date(); }, 2000); } $scope.showLoading = function(isSpecial) { $rootScope.isSpecial = isSpecial; showLoading(); } });.loading { background-color: transparent !important; } .special-page .loading { background-color: rgba(0, 0, 0, 0.5) !important; }<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Ionic Modal</title> <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body ng-controller="AppCtrl" ng-class="{'special-page': isSpecial}"> <ion-view title="Home"> <ion-header-bar> <h1 class="title">Sample Ionic Loading</h1> </ion-header-bar> <ion-content has-header="true"> <ion-list> <ion-item ng-click="showLoading();">Click to show transparent Loading</ion-item> <ion-item ng-click="showLoading(true);">Click to show special Loading</ion-item> <ion-item ng-if="msg">{{msg}}</ion-item> </ion-list> </ion-content> </ion-view> </body> </html>Answers 2
What have you done so far is right. You can remove the original spinner again or make it to what you want when you leave the special.js page,
//in your special.js controller $scope.$on('$stateChangeStart', function () { //your custom spinner here }); Usefull links,
if using state provider - $stateChangeStart
if using location provider - $locationChangeStart
why css matters? you can set the css again to transparent in each page?
0 comments:
Post a Comment