如何给 gif 图像加载直到响应来自后端

Question

HTML:

   <div class="row" 
ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" >

            <div class="file-upload-wrapper">
                <div class="file-upload">
                    <img class="file-image" ng-src="{{imageSource}}" ng-if="imageSource"/>
                    <input type="file" file-model="image" name="file" class="file"/>
                </div>
                <div class="file-upload-text"> Upload Picture</div>
            </div>
            <div class="file-restriction-info">
                Maximum 5 Images can be attached.<br/>
                File size below 10MB. File Format jpeg & png
            </div>
            <div class="file-tags">
                <ul>
                    <li ng-repeat="image in files | filter :'image'" >
                        <div class="file-tag-baloon">
                            <span>
                                <a ng-click="getImage(image.id);">{{image.filename}}</a>
                            </span>
                            <span><a ng-click="removeImage(image.id)">x</a></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

JS:

 $scope.dataLoading = false;

$scope.uploadVideo = function( file ){

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

                                        console.log(JSON.stringify(json));

            FileService.uploadFile( json, file ).then(function(res){
                        $scope.dataLoading = true;

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

            });

需要加载数据加载图像，直到来自后端的响应。我正在使用加载视频上传请求。由于视频上传时间较多。如果我使用数据加载，那会很好。现在我无法触发数据加载部分。需要帮助

Answer 1

为此，我建议使用 'angular-busy'。

https://github.com/cgross/angular-busy

使用此 angular 模块，您可以将承诺添加到范围对象。您绑定到 cg-busy 指令的此范围对象然后显示加载 gif，直到承诺得到解决。

controller.js

$scope.uploadPromise = FileService.uploadFile(json, file).then(.....

view.html

<div cg-busy="uploadPromise">Successfully uploaded!!</div>
<!-- It shows a loading icon until the promise 'uploadPromise' is resolved. Then this <div> will be shown -->

也可以添加您自己的 gif 或 svg。

Answer 2

<div class="row" ng-class="{visible: dataLoading, hidden: !dataLoading}" src="TOO LONG FOR ME TO COPY PASTE IT GOD DAMMIT">

在您的控制器中，不要更改任何内容（除非在完成加载后将 dataLoading 设置为 false）

在您的 CSS 文件中：

.visible {
    display: block;
}

.hidden {
    display: none;
}

如何给 gif 图像加载直到响应来自后端

How to give gif image for loading until response comes from backend

angularjs

angular-file-upload

ng-file-upload