Question

我想点击加载按钮时出现加载屏幕或模态，只有当http请求完成并获取所有数据时，此加载屏幕或模态才会被解除。简而言之，当点击开关时，用户无法执行任何操作而无法点击其他的按钮。我怎么能这样做。我正在使用角度与laravel 5.2

  Microsoft Visual Studio 2013 Version 12.0.31101.0.
  Copyright (C) Microsoft Corp. All rights reserved.

  Package 'CcVsiLanService Package' failed to load.
  Package 'CcVsiLanService Package' failed to load.

  Package 'CcVsiLanService Package' failed to load.

  1>------ Build started: Project: PLHC, Configuration: Debug Win32 ------

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

Answer 1

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

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

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

1 个答案: