Javascript 在 AngularJS 中加载内容时如何添加微调器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31742047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a spinner while loading the content in AngularJS?
提问by NNR
I am using button spinner while loading the content, when the user clicks on the "Search" button content will load, at this time buttonLabelwill be changed to "Searching" and spinner will be shown (Here button will be disabled). After loading the content (Promise resolved) buttonLabelwill be reverted back to "Search" (button will be enable here).
我在加载内容时使用按钮微调器，当用户单击“搜索”按钮内容将加载时，此时buttonLabel将更改为“搜索”并显示微调器（此处按钮将被禁用）。加载内容后（承诺已解决）buttonLabel将恢复为“搜索”（按钮将在此处启用）。
I have tried the below code, but it is always showing the spinner.
我试过下面的代码，但它总是显示微调器。
HTML :
HTML :
<button class="btn btn-xs btn btn-blue" ng-click="show()">
<span><i class="glyphicon glyphicon-off"></i></span> {{buttonLabel}}
</button>
Script :
脚本 ：
$scope.buttonLabel = "Search";
$scope.show = function() {
$scope.buttonLabel = "Searching";
$scope.test = TestService.getList( $cookieStore.get('url'),
$rootScope.resourceName+"/students" );
$scope.test.then( function( data ) {
if( data.list ) {
$scope.testData = data.list;
$scope.buttonLabel = "Search";
}
}
}
Updated Fiddle :http://jsfiddle.net/xc6nx235/18/
更新小提琴：http : //jsfiddle.net/xc6nx235/18/
回答by Jagdeep Singh
<div ng-app="formDemo" ng-controller="LocationFormCtrl">
<div>
<button type="submit" class="btn btn-primary" ng-click="search()">
<span ng-show="searchButtonText == 'Searching'"><i class="glyphicon glyphicon-refresh spinning"></i></span>
{{ searchButtonText }}
</button>
</div>
All you need to do is use ng-showor ng-hidedirectives.
您需要做的就是使用ng-show或ng-hide指令。
ng-show="expression"
ng-show="表达式"
<span ng-show="searchButtonText == 'Searching'">
<i class="glyphicon glyphicon-refresh spinning"></i>
</span>
this span will only be visible when searchButtonTextwill be equal to a string 'Searching'.
此跨度仅在searchButtonText等于字符串“正在搜索”时才可见。
You should learn more about angular's directives. They'll be useful in future.
您应该了解有关 angular 指令的更多信息。它们将来会很有用。
Good luck.
祝你好运。
回答by Thom-x
Use ng-showto show (or not) the loader ng-show="test":
使用ng-show显示（或不）装载机ng-show="test"：
// http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/
angular.module("formDemo", [])
.controller("LocationFormCtrl", function ($scope, $timeout) {
$scope.searchButtonText = "Search";
$scope.test="false";
$scope.search = function() {
$scope.test="true";
$scope.searchButtonText = "Searching";
$timeout(function(){
$scope.test="false";
$scope.searchButtonText = "Search";
},1000)
// Do your searching here
}
});body {
font-family:"HelveticNeue", sans-serif;
font-size: 14px;
padding: 20px;
}
h2 {
color: #999;
margin-top: 0;
}
.field {
margin-bottom: 1em;
}
.click-to-edit {
display: inline-block;
}
input {
display: initial !important;
width: auto !important;
margin: 0 5px 0 0 !important;
}
.glyphicon.spinning {
animation: spin 1s infinite linear;
-webkit-animation: spin2 1s infinite linear;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<div ng-app="formDemo" ng-controller="LocationFormCtrl">
<div>
<button type="submit" class="btn btn-primary" ng-click="search()">
<span ng-show="test" ><i class="glyphicon glyphicon-refresh spinning"></i></span>
{{ searchButtonText }}
</button>
</div>
</div>回答by jvdveuten
You can also use this simple directive:
您还可以使用这个简单的指令：
https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html
https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html
To use it, just add the button-spinner='loading'attribute:
要使用它，只需添加button-spinner='loading'属性：
<button class="btn btn-success" ng-click="show()" button-spinner="loading">Load</button>
It will append a spinner to it, inside the button, when your loadingvariable in the scope is true.
当loading作用域中的变量为真时，它会在按钮内附加一个微调器。
回答by Razvan B.
Just add an ng-showto your spinner:
只需ng-show向您的微调器添加一个：
<span ng-show="loading"><i class="glyphicon glyphicon-refresh spinning"></i></span>
and controller:
和控制器：
.controller("LocationFormCtrl", function ($scope) {
$scope.searchButtonText = "Search";
$scope.loading = false;
$scope.test="false";
$scope.search = function() {
$scope.test="true";
$scope.loading="true"
$scope.searchButtonText = "Searching";
// Do your searching here
}
});
Then, when you get your response, set $scope.loadingto falseagain
然后，当您收到回复时，再次设置$scope.loading为false
回答by Ajay Narain Mathur
Use ng-showdirective like this ng-show="test"on spinner span:
在微调器跨度上使用这样的ng-show指令ng-show="test"：
Snippet:
片段：
// http://icelab.com.au/articles/levelling-up-with-angularjs-building-a-reusable-click-to-edit-directive/
angular.module("formDemo", [])
.controller("LocationFormCtrl", function($scope) {
$scope.searchButtonText = "Search";
$scope.test = "false";
$scope.search = function() {
$scope.test = "true";
$scope.searchButtonText = "Searching";
// Do your searching here
}
});</style> <!-- Ugly Hack due to jsFiddle issue:http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script> <style> body {
font-family: "HelveticNeue", sans-serif;
font-size: 14px;
padding: 20px;
}
h2 {
color: #999;
margin-top: 0;
}
.field {
margin-bottom: 1em;
}
.click-to-edit {
display: inline-block;
}
input {
display: initial !important;
width: auto !important;
margin: 0 5px 0 0 !important;
}
.glyphicon.spinning {
animation: spin 1s infinite linear;
-webkit-animation: spin2 1s infinite linear;
}
@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
@-webkit-keyframes spin2 {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="formDemo" ng-controller="LocationFormCtrl">
<div>
<button type="submit" class="btn btn-primary" ng-click="search()">
<span ng-show="test"><i class="glyphicon glyphicon-refresh spinning"></i></span>
{{ searchButtonText }}
</button>
</div>
</div>回答by Lucian
You should use ng-classto add/remove the class .spinningbased on $scope.test. I have updated your fiddle here: http://jsfiddle.net/xc6nx235/15/
您应该使用ng-class添加/删除类.spinning基础上$scope.test。我在这里更新了你的小提琴：http: //jsfiddle.net/xc6nx235/15/
回答by rouble
For Angular2/4, you can use [hidden] to control the visibility of the spinner. Here is a Plunker.
对于 Angular2/4，您可以使用 [hidden] 来控制微调器的可见性。这是一个Plunker。
<button class="btn btn-primary" (click)="onClickDoSomething()">
<span [hidden]="!spin">
<i class="glyphicon glyphicon-refresh spinning"></i>
</span> Do something
</button>
Where spinning is defined in as:
其中旋转定义为：
<style>
.spinning {
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
</style>
And your component simply sets the boolean to control the visibility of the spinner. In this example, we simply spin for 10 seconds.
您的组件只需设置布尔值来控制微调器的可见性。在这个例子中，我们只是旋转 10 秒。
import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'do-something',
templateUrl: 'src/dosomething.html'
})
export class DoSomething {
private spin: boolean = false;
onClickDoSomething() {
this.spin = true;
this.sub = Observable.interval(10000).subscribe(x => {
this.sub.unsubscribe();
this.spin = false;
});
}
}
