AngularJS: Dodawanie przycisku Spinner podczas ładowania zawartości

Question

Używam przycisku pokrętła podczas ładowania zawartości, gdy użytkownik kliknie przycisk "Szukaj", załaduje zawartość, w tym momencie buttonLabel zostanie zmieniony na "Wyszukiwanie" i pokrętło zostanie wyświetlony (tutaj przycisk zostanie dowiązany). Po załadowaniu treści (Obietnica rozstrzygnięta) buttonLable powróci do "Szukaj" (przycisk zostanie włączony tutaj). Próbowałem poniższy kod, ale zawsze pokazuje spinner.

HTML:

<button class="btn btn-xs btn btn-blue" ng-click="show()"> 
    <span><i class="glyphicon glyphicon-off"></i></span> {{buttonLabel}} 
</button> 

Scenariusz:

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

Answer 1

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

Wszystko, co musisz zrobić, to użyć ng-show lub ng-hide dyrektyw.

ng pokazują = „ekspresja”

<span ng-show="searchButtonText == 'Searching'"> 
    <i class="glyphicon glyphicon-refresh spinning"></i> 
</span> 

Ten okres będzie widoczny tylko przy searchButtonText będzie równa łańcucha „szukanie”.

Powinieneś dowiedzieć się więcej o dyrektywach kątowych.Będą przydatne w przyszłości.

Powodzenia.

Demo http://jsfiddle.net/xc6nx235/16/

Answer 2

Wystarczy dodać ng-show do wirówki:

<span ng-show="loading"><i class="glyphicon glyphicon-refresh spinning"></i></span> 

i kontroler:

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

Następnie, gdy pojawi się odpowiedź, ustaw $scope.loading do false ponownie

Demo

Answer 3

Zastosowanie ng-show dyrektywa jak ten ng-show="test" o rozpiętości do wirowania:

Fragment:

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

Answer 4

Zastosowanie ng-show pokazać (lub nie), ładowarka ng-show="test":

JSFiddle

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

Answer 5

Powinieneś użyć ng-class, aby dodać/usunąć klasę .spinning na podstawie $scope.test. Mam zaktualizowany skrzypce tutaj: http://jsfiddle.net/xc6nx235/15/

Answer 6

Można również użyć tego prostego dyrektywy:

https://rawgit.com/jvdvleuten/angular-button-spinner/master/demo.html

Aby go użyć, wystarczy dodać atrybut button-spinner='loading':

<button class="btn btn-success" ng-click="show()" button-spinner="loading">Load</button> 

on dołączy do tarczy do to, wewnątrz przycisku, gdy zmienna loading w zakresie jest prawdziwa.

Answer 7

Dla Angular2/4 można użyć [ukrytego], aby kontrolować widoczność spinnera. Oto Plunker.

<button class="btn btn-primary" (click)="onClickDoSomething()"> 
    <span [hidden]="!spin"> 
     <i class="glyphicon glyphicon-refresh spinning"></i> 
    </span> Do something 
</button> 

Gdzie przędzenie jest zdefiniowana jako:

<style> 
    .spinning { 
    animation: spin 1s infinite linear; 
    } 

    @keyframes spin { 
    from { 
     transform: scale(1) rotate(0deg); 
    } 
    to { 
     transform: scale(1) rotate(360deg); 
    } 
    } 
</style> 

I komponent prostu ustawia wartość logiczną aby kontrolować widoczność turbinki. W tym przykładzie po prostu kręcimy przez 10 sekund.

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