Home Ask Login Register

Developers Planet

Your answer is one click away!

Ravi Khambhati 3 weeks ago

Non clickable background with AngularJS loading bar

I am trying to set non-clickable loading bar and everything looks good but I can still click on the button. You can see the same on plnkr.

https://plnkr.co/edit/4eh6ibG45JnLB6qYktxn?p=preview

I checked that both of the bellow div has attribute "pointer-events: none" but its not working.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css" rel="stylesheet" />
    <style>

        #loading-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.2);
            z-index: 11002;

        }

        #loading-bar-spinner {
            display: block;
            position: fixed;
            z-index: 11002; 
            top: 50%;
            left: 50%;
            margin-left: -15px;
            margin-right: -15px;

        }
    </style>

    <div ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
        <button ng-click="startLoading()">startLoading</button>
        <button ng-click="completeLoading()">completeLoading</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js"></script>

    <script>
        var LoadingBarExample = angular.module('LoadingBarExample', ['chieffancypants.loadingBar', 'ngAnimate'])
            .config(function (cfpLoadingBarProvider) {
                //cfpLoadi        

Answers


Sajeetharan 3 weeks ago

You can handle this with angularjs way, just add ng-disabled="loading" to make the button disabled and enabled based on the loading value

   <button ng-disabled="loading" ng-click="startLoading()">startLoading</button>
   <button ng-disabled="loading" ng-click="completeLoading()">completeLoading</button>

and controller as,

 LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
             $scope.loading = false;
            $scope.startLoading = function () {
                cfpLoadingBar.start();
                 $scope.loading =true;

            };
            $scope.completeLoading = function () {
                cfpLoadingBar.complete();
                  $scope.loading =false;
            };

        });

DEMO

EDIT

If you want to disable the whole form with a single way, use fieldset instead of div and use ng-disabled

  <fieldset ng-disabled="loading" ng-app="LoadingBarExample" ng-controller="ExampleCtrl">
        <button  ng-click="startLoading()">startLoading</button>
        <button  ng-click="completeLoading()">completeLoading</button>
  </fieldset>

Post Status

Asked in 3 weeks ago
Viewed 3,995 times
Voted 5
Answered 1 times

Search




Leave an answer


Quote of the day: live life