Question

我是AngularJs framework的新人，我的英语不是很好。所以我希望有人可以帮助我解决我的问题而不介意我的语法嘿嘿。我主要知道由angularjs触发的ng-show中的进度条，但如果我想在加载object标记之前放置进度条，该怎么办呢？例如

    <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）----获取---- [控制器] ----进度条 - 查看（html）

Answer 1

你的英语非常好，你根本不用担心。回到你的问题，你走在正确的道路上。无论您选择什么，都需要使用ng-show或ng-hide。假设您选择ng-show在控制器中，您将声明一个变量

$scope.isProgessBarVisible = true;

然后，在控制器本身内，从服务器的http调用返回后，您将其设置为false。

$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>

有了这个，进度条将显示，直到从服务器获取文件并显示。

Answer 2

希望这会帮助你。这是在按钮单击时显示和隐藏微调栏的基本示例。

＆＃13;

<!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>
		  <style>
			.loader {
				border: 16px solid #f3f3f3; /* Light grey */
				border-top: 16px solid #3498db; /* Blue */
				border-radius: 50%;
				width: 120px;
				height: 120px;
				animation: spin 2s linear infinite;
				margin: 0 auto;
			}

			@keyframes spin {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}
			html, body, container {
				height: 100%;
				width: 100%;
				margin: 0;
			}
		  </style>
    </head>
    <body ng-app="changeExample">
        <div class="container" ng-controller="ExampleController">
			<button class="btn" ng-click="ShowSpinner()">Show Spinner</button>
			<button class="btn" ng-click="HideSpinner()">Hide Spinner</button>
            <div ng-if="ShowSpinnerStatus" class="loader"></div>
        </div>
        <script>
			var app = angular.module("changeExample", []);
			app.controller('ExampleController', ['$scope', function ($scope) {
				$scope.ShowSpinnerStatus = true;
				
				$scope.ShowSpinner = function(){
					$scope.ShowSpinnerStatus = true;
				};
				$scope.HideSpinner = function(){
					$scope.ShowSpinnerStatus = false;
				};
			}]);
		</script>
    </body>
    </html>

＆＃13;

您可以像这样在服务电话上显示和隐藏微调器。

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

Answer 3

我认为问题不只是显示/隐藏进度条，也许是关于如何在<object>内容加载完时隐藏进度条

最初，我尝试在ng-load上使用<object>，但不知怎的，它没有用。所以我尝试使用onload确实有效。但由于onLoad()处理函数在角度环境之外，我不得不回到角度范围，以便能够设置隐藏进度条的变量$scope.showProgress。请亲自看看plunkr，如果您正在寻找，请告诉我。

Plunkr https://plnkr.co/edit/wxgetLZdST0WcPEHyraZ

注意：我不知道是否可以获取进度状态编号（已加载％），但至少我们可以显示＆＃34;正在加载......＆＃34;或<object>加载时的微调器图标。

Answer 4

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

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

angular-loading-bar是$ http calls

的一个不错的选择

Answer 5

我会推荐ng-progress。这会处理多个请求

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

如何在AngularJS中显示进度条

5 个答案: