Нужен индикатор выполнения для метода $ http в angularjs 1.6.5

Question

Я пытаюсь добавить индикатор прогресса в мой шаблон, который будет динамически обновлять его значение в соответствии с процессом загрузки файла. Я использовал angular-loading-bar, но хочу иметь свой собственный для следующего запроса $ http: -

        $http.patch(url, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(successCallback, errorCallback);
        function successCallback(response){
            console.log("Success");
            console.log(response);
        };
        function errorCallback(error){
            alert("Error Uploading!");
            console.log(error);
        };

И я хочу обновить мой следующий индикатор выполнения: -

<div class="progress">
     <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ progress }} %">
        {{ progress }} %
     </div>
</div>

Где {{ progress }} должно быть моим процентным значением загрузки файла. Заранее спасибо.

Answer 1

Вы можете добавить uploadEventHandlers, как показано ниже: -

        $http.patch(url, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined},
            uploadEventHandlers: {
                progress: function (e) {
                          if (e.lengthComputable) {
                             $scope.progressBar = (e.loaded / e.total) * 100;
                             console.log($scope.progressBar)
                          }
                }
            }
        }).then(successCallback, errorCallback);
        function successCallback(response){
            console.log("Success");
            console.log(response);
        };
        function errorCallback(error){
            alert("Error Uploading!");
            console.log(error);
        };

А потом в html: -

<div class="progress">
     <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{progressBar}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progressBar}}%">
                                                {{progressBar}}
     </div>
 </div>