加载或进度屏幕出现在点击事件上答案

【问题标题】：loading or progress screen appear on click event加载或进度屏幕出现在点击事件上
【发布时间】：2016-08-07 16:15:30
【问题描述】：

我希望在单击切换按钮时出现加载屏幕或模式，并且此加载屏幕或模式仅在 http 请求完成并获取所有数据时才会关闭。简而言之，当单击开关时，用户无法执行任何操作，也无法单击其他按钮。所以我该怎么做。我在 laravel 5.2 中使用 angular

        <div class="table-responsive">
            <table class="table table-hover ">
                <thead>
                <tr>
                    <th>Device Name</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>


                <tr ng-repeat="device in devices">
                    <td>[[device.device_name]]</td>
                     <td>
                        <switch id="enabled" name="enabled" on="ON" off="OFF"
                                ng-init="enabled=device.status" ng-model="enabled" class="green "
                                  ng-change="changeStatus([[device.device_id]],[[device.user_id]],enabled)"
                        ></switch>


                    </td>

                </tr>


                </tbody>
            </table>
        </div><!-- /.table-responsive -->

角度文件

myapp.controller('AutomationController',function(dataFactory,$scope){

    $scope.devices;
    $scope.userId=null;
    loadDevices();
    function loadDevices()
    {
        dataFactory.httpRequest('/user_devices').then(function (data) {
            console.log(data);
            $scope.devices=data;
     })


    }
$scope.changeStatus=function($device_id,$user_id,$status){
        if($status)
        {
            $status=1;
        }
        else {
            $status=0;
        }
        dataFactory.httpRequest('/device_status/'+$device_id,'PUT',{},
            {"user_id":$scope.userId,
             "status":$status
            }).then(function(data) {

        });


    }

});

【问题讨论】：

请澄清你的问题..

标签： angularjs laravel-5 modal-dialog bootstrap-modal switchery

【解决方案1】：

在发出$http 请求之前，设置$scope.loading = true; 并在你的promise 中设置finally(function(){}); 设置$scope.loading = false;

在您的 HTML 模板中，添加类似 <div class="modal loading" ng-if="loading">Loading...</div> 的内容。使用 CSS 使其占据整个屏幕并具有更高的 z-index 以阻止对 UI 其余部分的点击。

【讨论】：