Question

我正在尝试设置不可点击的加载栏，一切看起来不错，但我仍然可以点击按钮。您可以在plnkr上看到相同内容。

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

我检查过两个bellow div都有属性“pointer-events：none”，但它不起作用。

<!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) {
                //cfpLoadingBarProvider.includeSpinner = false;
                //cfpLoadingBarProvider.includeBar = false;
                //    //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Loading...</div>';

                //    //cfpLoadingBarProvider.parentSelector = '#loading-bar-container';
                //    //cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner">Custom Loading Message...</div>';


            });
        LoadingBarExample.controller('ExampleCtrl', function ($scope, $http, $timeout, cfpLoadingBar) {
            $scope.startLoading = function () {
                cfpLoadingBar.start();
            };
            $scope.completeLoading = function () {
                cfpLoadingBar.complete();
            };

        });

    </script>
</body>
</html>

装载杆 的加载杆微调

Answer 1

您可以使用angularjs方式处理此问题，只需添加ng-disabled="loading"即可根据加载值禁用和启用按钮

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

和控制器为，

 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

修改

如果要以单一方式禁用整个表单，请使用fieldset而不是div并使用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>

AngularJS加载栏的不可点击背景

1 个答案: