Как показать индикатор выполнения в AngularJS

Я новичок в использовании AngularJs framework, и я не так хорош на английском. поэтому я надеюсь, что кто-то может помочь мне решить мою проблему и не иметь в виду мою грамматику хе-хе. Я знаю, главным образом, индикатор выполнения в angularjs, вызванный ng-show, но что, если я хочу поставить индикатор выполнения перед загрузкой тега object. напримерКак показать индикатор выполнения в AngularJS

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="70" 
    aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
    <object width="400" height="400" data="file.pdf"></object> 
    </div> 
</div>

позвольте предположить, что этот файл file.pdf извлекается с сервера. что, как говорится, требуется время для загрузки, поэтому я хочу поставить индикатор выполнения на тот момент, пока данные, если они извлекаются с сервера и спрятали его, когда объект полностью загружен, спасибо вам, ребята.

пример потока

данных: (file.pdf) ---- Fetching ---- [контроллер] ---- Прогресс бар - Просмотр (HTML)

источник

2016-11-07 alvin manarya

Ваш английский очень хорошо, и вам нужно не беспокойтесь об этом вообще. Возвращаясь к вашему вопросу, вы на правильном пути. Вам нужно будет использовать ng-show или ng-hide, что бы вы ни выбрали. Допустим, вы выбрали ng-show В контроллере, вы объявляете переменную,

$scope.isProgessBarVisible = true;

, а затем, в самом контроллере, после возвращения из HTTP вызова от сервера, вы должны установить его на ложь.

$http.get('someUrl') 
.then(function successCallback(response) { 
//load you pdf file content 
$scope.isProgessBarVisible = false; 
}

И в HTML

<div class="progress"> 
    <div class="progress-bar" role="progressbar" ng-show="isProgessBarVisible" aria-valuenow="70" 
    aria-valuemin="0" aria-valuemax="100" style="width:70%"> 
    <object width="400" height="400" data="file.pdf"></object> 
    </div>

При этом в месте, индикатор будет отображаться, пока файл не извлекается из сервера и отображается.

источник

2016-11-07 09:14:38 sisyphus

$ scope.isProgressBarVisible set false уже после извлечения данных, из-за чего progressBar не показывает, даже файл еще не полностью загружен в объект. основная проблема заключается в том, что мне нужно поставить индикатор выполнения до того, как данные загрузятся в объект, а не при извлечении. –

Надеюсь, это поможет вам. Это базовый пример для показа и спрятывания прядильной панели при нажатии кнопки.

<!DOCTYPE html> 
 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <title>Welcome to LearnKode - A code learning platform</title> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> 
 
\t \t <style> 
 
\t \t \t .loader { 
 
\t \t \t \t border: 16px solid #f3f3f3; /* Light grey */ 
 
\t \t \t \t border-top: 16px solid #3498db; /* Blue */ 
 
\t \t \t \t border-radius: 50%; 
 
\t \t \t \t width: 120px; 
 
\t \t \t \t height: 120px; 
 
\t \t \t \t animation: spin 2s linear infinite; 
 
\t \t \t \t margin: 0 auto; 
 
\t \t \t } 
 

 
\t \t \t @keyframes spin { 
 
\t \t \t \t 0% { transform: rotate(0deg); } 
 
\t \t \t \t 100% { transform: rotate(360deg); } 
 
\t \t \t } 
 
\t \t \t html, body, container { 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t margin: 0; 
 
\t \t \t } 
 
\t \t </style> 
 
    </head> 
 
    <body ng-app="changeExample"> 
 
     <div class="container" ng-controller="ExampleController"> 
 
\t \t \t <button class="btn" ng-click="ShowSpinner()">Show Spinner</button> 
 
\t \t \t <button class="btn" ng-click="HideSpinner()">Hide Spinner</button> 
 
      <div ng-if="ShowSpinnerStatus" class="loader"></div> 
 
     </div> 
 
     <script> 
 
\t \t \t var app = angular.module("changeExample", []); 
 
\t \t \t app.controller('ExampleController', ['$scope', function ($scope) { 
 
\t \t \t \t $scope.ShowSpinnerStatus = true; 
 
\t \t \t \t 
 
\t \t \t \t $scope.ShowSpinner = function(){ 
 
\t \t \t \t \t $scope.ShowSpinnerStatus = true; 
 
\t \t \t \t }; 
 
\t \t \t \t $scope.HideSpinner = function(){ 
 
\t \t \t \t \t $scope.ShowSpinnerStatus = false; 
 
\t \t \t \t }; 
 
\t \t \t }]); 
 
\t \t </script> 
 
    </body> 
 
    </html>

Вы можете показать и скрыть вертушку на вызов службы, как это.

 $scope.ShowSpinner(); 
     LoginService.authenticateUser(userName, password).then(
      function(response){ 
       $scope.HideSpinner(); 
       if(response.isSuccess){ 
        // Login Success 
       } 
       else{ 
        //Login Fail 

       } 
      }, 
      function(error){ 
       //Network related error 
       $scope.HideSpinner(); 
      } 
     );

источник

2016-11-07 09:23:18 Nitheesh

Основная проблема заключается в том, что мне нужно поставить индикатор выполнения перед загрузкой данных в объект в html. поэтому я думаю, что мне нужно получить объект html для моего контроллера, который я не знаю, если это возможно –

Вы можете вызвать метод ShowSpinner перед загрузкой объекта и после завершения загрузки объекта вы можете вызвать метод HideSpinner, чтобы скрыть его. – Nitheesh

как я их называю, ничего не делая? я хочу, чтобы вызвать их, не нажимая я просто хочу, чтобы показать перед погрузкой и автоматически скрываются после –

http://chieffancypants.github.io/angular-loading-bar/

angular.module('app', ['angular-loading-bar']);

угловой погрузо-бар является хорошим вариантом для $ HTTP называет

источник

2016-11-07 09:29:59

Я бы рекомендовал нг-прогресс. Это обрабатывает несколько запросов

http://victorbjelkholm.github.io/ngProgress/

источник

2016-11-07 09:59:51

Я думаю, что проблема не только отобразить/скрыть индикатор прогресса, возможно, речь идет о том, как скрыть индикатор когда <object> «s содержание догружать.

Первоначально, я попытался использовать ng-load на <object>, но как-то это не сработало. Поэтому я попытался использовать onload, который действительно работает.Но поскольку функция обработчика onLoad() является внешней угловой средой, мне пришлось вернуть угловую область, чтобы иметь возможность установить переменную $scope.showProgress, которая скроет индикатор выполнения. Посмотрите на plunkr самостоятельно, и дайте мне знать, если это то, что вы ищете.

Plunkrhttps://plnkr.co/edit/wxgetLZdST0WcPEHyraZ

Примечание: Я не знаю, можно ли получить номер состояния прогресса (% загружен), но, по крайней мере, мы можем показать «Загрузка ...» или значок загрузки загружается <object>.

источник

2016-11-07 10:40:51 elfan

plnkr вы должны оба показать загрузку и изображение sir elfan –

и дайте свое право. это моя проблема загрузки до того, как будут показаны изображения. Я хочу поставить индикатор выполнения между этим –

да, поток будет: (1) показывать «Загрузка ...» и начать загрузку '

Как показать индикатор выполнения в AngularJS

ответ

Смежные вопросы