Używanie ładowania początkowego i ładowanie z użyciem klawiatury aurobu

Question

Nie mogę się więc domyślić, jak użyć atrybutu ładowania z poziomu ekranu, aby pokazać spinner, podczas gdy mój celownik otrzymuje zdalne dane. Nie mogę znaleźć żadnych przykładów jego użycia w dowolnym miejscu.

Czy jest to coś, co powinniśmy ustawić ręcznie w zakresie, gdy rozpoczynamy żądanie? a następnie ręcznie ustawić na false, gdy żądanie zostanie wykonane? Czasami jest magia z tymi kątowymi rzeczami i nigdy nie jestem pewna, czy coś się dzieje na zapleczu, aby poradzić sobie z niektórymi z tych rzeczy.

Prosty przykład użycia tej wartości w ładowaniu na klawiaturze byłoby miłe. Po prostu nie mogę myśleć o tym, jak używać go poprawnie. Oczywiście w dużej części dokumentacji kątowej brakuje dobrych przykładów dla niektórych bardziej złożonych funkcji.

Answer 1

Moim zdaniem dokumentacja nie jest aż tak niejasna: "Wiązanie ze zmienną [...]". Dlatego właśnie określasz zmienną w bieżącym zasięgu, która zostanie ustawiona na wartość true, gdy wyszukiwanie jest uruchomione. Tutaj jest bardzo głupi przykład, żeby pokazać co dzieje:

function MainController($scope) { 
    $scope.lookup = function() { 
    console.log("isLoading is " + $scope.isLoading); 
    return []; 
    } 
} 

<div ng:controller="MainController"> 
    <input type="text" ng:model="search" 
    typeahead="result for result in lookup($viewValue)" 
    typeahead-loading="isLoading"></input> 
    isLoading: {{isLoading}} 
</div> 

Po uruchomieniu tego i wpisać coś do wyszukiwania, można zauważyć, że wyjście jest „isLoading: false”. Jednak w konsoli javascript zobaczysz, że podczas działania funkcji odnośnika, $ scope.isLoading ma wartość true.

Więc po prostu określić zmienną w swoim zakresie o wpisywanie znaków z wyprzedzeniem-loading, a następnie można zrobić coś takiego:

<div ng:show="!!isLoading">loading...</div> 

Answer 2

Nie trzeba przejść przez funkcję (nie wiem, w każdym razie):

<input ng-model="search" typeahead="result for result in lookup($viewValue)" 
    typeahead-loading="is_loading"> 

<!-- change class (or something) when lookup is loading --> 
<span ng-class="{'loading-class': is_loading}">Hey, I'm loading!</span>