Css 带有AngularJS加载条的不可点击背景_Css_Angularjs

Css 带有AngularJS加载条的不可点击背景

css angularjs

Css 带有AngularJS加载条的不可点击背景,css,angularjs,Css,Angularjs,我试图设置不可点击的加载条，一切看起来都很好，但我仍然可以点击按钮。你可以在plnkr上看到同样的情况我检查了两个bellow div是否都有“指针事件：无”属性，但它不起作用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <link href

我试图设置不可点击的加载条，一切看起来都很好，但我仍然可以点击按钮。你可以在plnkr上看到同样的情况

我检查了两个bellow div是否都有“指针事件：无”属性，但它不起作用

<!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>


#加载杆{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（0,0,0,0.2）；
z指数：11002；
}
#加载杆旋转器{
显示：块；
位置：固定；
z指数：11002；
最高：50%；
左：50%；
左边距：-15px；
右边距：-15px；
}
惊人的
完全加载
var LoadingBarExample=angular.module（'LoadingBarExample'，['chieffancypants.loadingBar'，'ngAnimate']））
.config（函数（cfpLoadingBarProvider）{
//cfpLoadingBarProvider.includespenner=false；
//cfpLoadingBarProvider.includeBar=false；
////cfpLoadingBarProvider.spinnerTemplate='Loading…'；
////cfpLoadingBarProvider.parentSelector='#加载条容器'；
////cfpLoadingBarProvider.spinnerTemplate='Custom Loading Message…'；
});
加载barexample.controller（'ExampleCtrl'，函数（$scope，$http，$timeout，cfpLoadingBar）{
$scope.startLoading=函数（）{
cfpLoadingBar.start（）；
};
$scope.completeLoading=函数（）{
cfpLoadingBar.complete（）；
};
});

加载条 加载条微调器

您可以使用angularjs方式处理此问题，只需添加

ng disabled=“loading”

即可根据加载值禁用和启用按钮

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

编辑

如果要使用单一方式禁用整个表单，请使用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>


惊人的
完全加载

谢谢，但是如果我们有更多的控制，这个解决方案将很难实施。我想在css的帮助下做到这一点。这更好，但我正在寻找css选项。好的，这是css的解决方案，谢谢。我得到了CSS解决方案，并在plnkr中进行了更新。为什么在加载程序上需要

指针事件：none

？它上面没有事件，你可以删除它，按钮将不再可点击……为什么你不能隐藏它们，用css加载时只需添加一个类。@kukkuz谢谢我用指针事件更新了css类：auto；这起作用了。也在plnkr中更新。

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