появится окно загрузки или прогресса при нажатии на событие

Question

Я хочу, чтобы при нажатии кнопки переключателя экран загрузки появлялся или был модальным, и этот экран загрузки или модальный будет отклоняться только после завершения HTTP-запроса и получения всех данных. Короче, когда нажимают на переключатель, тогда пользователь не может выполнить какие-либо действия и не могут нажать на другой buttons.so, как я могу сделать this.I'm с помощью угловой с Laravel 5,2

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

ANGULAR файлу

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

     }); 


    } 

}); 

Answer 1

Прежде чем сделать свой $http запрос, установите $scope.loading = true; и в вашей Promise, finally(function(){}); установить $scope.loading = false;

В шаблоне HTML, добавить что-то вроде <div class="modal loading" ng-if="loading">Loading...</div>. Используйте CSS, чтобы он занимал весь экран и имел более высокий индекс z, поэтому он блокирует клики на остальном пользовательском интерфейсе.