I am maintaining a code written some time ago, I have no experience in AngularJS. I have to turn on a spinner while an HTTP request is fired and to turn off it when the HTTP response is received.
The spinner is controlled by a ng-if
and the $scope.authenticating
variable.
Currently, when the page is loaded, the spinner is turned on (accordingly to the initially state of $scope.authenticating === false
.
The user switches the switch and the HTTP is fired correctly, the $scope.authenticating
is set to true
and the spinner correctly shows-up.
When the HTTP response returns, the console log shows me the contents of the response, all is okay, then the $scope.authenticating
is set to false
, but: the spinner still remains and doesn't disappear.
Any help is appreciated.
Following, the code.
The controller:
$scope.authenticating = false
$scope.myfunction = async function (check, change, user) {
if (someCheck(user)) {
$scope.modified = true;
...
$scope.authenticating = true
let res = await AppUserResource.patch(..., ...).$promise;
console.log('res: ' + JSON.stringify(res))
$scope.authenticating = false
}
}
The relative HTML Code:
<div style="margin-top:13px">
<div ng-if="!authenticating">
<label class="switch">
<input id="switch" ng-change="bypassApps(disabledAppsCheckbox, true, user)" ng-model="disabledAppsCheckbox"
type="checkbox">
<div class="slider round">
<div class="slider-text pull-left text-green-table">{{'ON' | translate}}</div>
<div class="slider-text pull-right text-red-table">{{'OFF' | translate}}</div>
</div>
</label>
</div>
<div ng-if="authenticating">
<i class="fa fa-spinner fa-spin"style="font-size:270px;margin-bottom:5%; margin-top:5%;"></i>
</div>
</div>
When async/await pattern is used its outside of the angularJS digest-loop. For this reason you have to call
$scope.$apply()
https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply