Video Ladenachricht, bis Antwort von Backend kommt

Question

Video Upload.js

var json = { 
        "request": { 
         "service":{ 
          "servicetype":servicetype, 
          "session_id": session_id 
         },  
         "data":{  
          "rolename":rolename 
         } 
        } 
       }; 


       FileService.uploadFile(json, file).then(function(res){ 
            console.log(JSON.stringify(res)); 

        if(res && res.status.code == 0) { 
         $scope.getVideo(res.data.mediaids[0]); 
         $scope.getAll(); 
        } else FlashService.Error(res.status.message, true); 
       }); 
      } 

Video HTML:

<div class="row"> 
     <video ng-if="videoSource.length > 0" vg-src="videoSource" 
       preload='metadata' controls></video> 
     <div class="file-upload-wrapper"> 
      <div class="file-video-upload"> 
       <input type="file" file-model="video" name="file" class="video"/> 
      </div> 
     </div> 
     <div class="file-tags"> 
      <ul> 
       <li ng-repeat="video in files | filter :'video'" > 
        <div class="file-tag-baloon"> 
         <span> 
          <a ng-click="getVideo(video.id);">{{video.filename}}</a> 
         </span> 
         <span><a ng-click="removeVideo(video.id)">x</a></span> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 

ich einen Video-Upload getan habe meine Backend-Service Anfrage mit, das ist zu succesfull. Aber manchmal ist das Problem, wenn meine Videogröße groß ist oder das Internet zu langsam ist. Es ist nur Leerlauf und ich muss Antimeldung oder gif Bild wie Video laden, bis die Antwort vom Backend kommt. Brauche Unterstützung.

Answer 1

Sie könnten ein Flag gesetzt, um anzuzeigen, ob ein Spinner angezeigt werden oder nicht, so etwas wie dieses:

$scope.getVideo = function(id){ 
    $scope.displayLoadImage = true; // spinner flag 

    FileService.uploadFile(json, file).then(
    function(res){ // on success 
     // Do your onsuccess stuff here 
    }, function(error) { 
     // Do your onsuccess stuff here 
    }).finally(function()){ 
     // The finally statement is executed regardless of result 
     $scope.displayLoadImage = true; 
    }); 
} 

Und dann irgendwo in Ihrem html

<div ng-show="displayLoadImage">... display spinner...</div>