视频加载消息，直到响应来自后端答案

【问题标题】：Video loading message until response comes from backend视频加载消息，直到响应来自后端
【发布时间】：2016-11-22 06:32:02
【问题描述】：

视频上传.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);
                });
            }

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

我已经使用我的后端服务请求完成了视频上传，这也很成功。但有时问题是如果我的视频太大或互联网太慢。它只是空闲，我需要像视频加载那样做提示或 gif 图像，直到响应来自后端。需要帮助。

【问题讨论】：

标签： angularjs video html5-video angular-file-upload

【解决方案1】：

您可以设置一个标志来指示是否显示微调器，如下所示：

$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;
    });
}

然后在你的 html 中的某个地方

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

【讨论】：