All geek questions in one place

CSS: Spinner overwrites the original counter settings, you need a css setting for each counter

I have two types of spinner in an ion skeleton. Initially, the ion counter has a dark background. Therefore, I will disable it using 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 that is different from the others. Only for the page special.jswhere I want the spinner to be with a dark background. However, with the code I installed, the spinner's parameter is app.jsoverwritten.

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 spinner in special.css limited to this page only and not to overwrite the whole counter?

The background is currently set to black for all counters.

The spinner that I wanted when loading app.js (orange color, this is not so obvious) enter image description here

The spinner that I wanted when loading special.js enter image description here

, , , special.js . app.js spinner , , special.js.

: (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 = "_";
            }



        }
    );

, spcial.js -

+4
2

$ionicLoading div.loading-container <body>, ; , <body> , , , :

  • ngClass : <body ng-class="{'special-page': isSpecialPage}">, , isSpecialPage true
  • $rootScope special.js :
    • $rootScope.isSpecialPage = true , <body> special-page, ( ui)
    • $destroy , $rootScope.isSpecialPage = false, special-page ( )
$scope.$on('$destroy', function() {
    $rootScope.isSpecialPage = false;
});
  • css, :
.loading {
    background-color:transparent!important;
}
.special-page .loading {
    background-color:black!important;
}

:

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>
+2

, . , , special.js,

//in your special.js controller
$scope.$on('$stateChangeStart', function () {
         //your custom spinner here
});

,

css ? css ?

0

Source: https://habr.com/ru/post/1689784/

More articles:


All Articles