Jak mogę przełączyć wskaźnik ładowania przed uruchomieniem lub w trakcie obsługi programu anuglar? - javascript, angularjs

Próbuję manipulować moim DOM (pokaż / ukryj wskaźnik ładowania) podczas działania kontrolera, który jest uruchamiany za pośrednictwem dyrektywy ng-click.

Mój kod wygląda następująco:

Kontroler:

$scope.wip = false;

// set currently listed categroy
$scope.setCurrentCategory = function( category ) {
$scope.wip = true;
//...expensive re-filtering here...
$scope.wip = false;
};

Widok:

<div ng-repeat="category in categories">
<a href="#" ng-click="setCurrentCategory(category);" >{{ category.name }}</a>
<img ng-cloak ng-show="wip" src="/images/icons/spinner-mini.gif" />
</div>

Teraz dzieje się tak, że wskaźnik obciążenia jest aktualizowany dopiero po zakończeniu obsługi całego kliknięcia, co oznacza, że ​​użytkownik nigdy go nie zobaczy.

Jak mogę przesłać aktualizację do pliku $ scope.wip do mojego widoku przed wykonaniem reszty programu obsługi?

Odpowiedzi:

Myślę, że problem polega na tym, że skrótu zakresu nie wywołuje się przed końcem funkcji setCurrentCategory.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$digest

Możesz wymusić skrót po $ scope.wip = true:

$scope.setCurrentCategory = function( category ) {
$scope.wip = true;
$scope.digest()
//...expensive re-filtering here...
$scope.wip = false;
};

Nie wiem, czy to najlepszy pomysł, aby wywołać podpowiedź w już funkcjonującej w trybie lifecycle, ale powinna działać.

Innym sposobem, jak sądzę, byłoby to, aby funkcja zakresu zmieniła wip:

$scope.setCurrentCategory = function( category ) {
$scope.toggleWip();
//...expensive re-filtering here...
$scope.toggleWip();
};
$scope.toggleWip = function() {
$scope.wip = !$scope.wip;
}