Как мога да превключвам индикатора за зареждане преди или по време на обработката на ng-click на анугала? - javascript, angularjs

Опитвам се да манипулирам моя DOM (показване / скриване на индикатор за зареждане), докато изпълнявам действие на контролера, което се задейства чрез директива ng-click.

Моят код изглежда така:

контролер:

$scope.wip = false;

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

Изглед:

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

Сега това, което се случва, е, че индикаторът за зареждане се актуализира само след като завърши цялата обработка на ng-click, което означава, че потребителят никога не може да го види.

Как да разпространя актуализацията до $ scope.wip в моя изглед, преди да бъде изпълнена останалата част от манипулатора?

Отговори:

Мисля, че проблемът е, че дайджестът на обхвата не се извиква преди края на вашата функция setCurrentCategory.

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

Можете да принудите дайджест след $ scope.wip = true по този начин:

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

Не знам дали е най-добрата идея да се задейства дайджест във вече циклирана функция, но би трябвало да работи.

Друг начин, който мисля да направя, би бил функцията за обхват да промени wip:

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