Laith Abo Zainih Laith Abo Zainih - 1 year ago 136
AngularJS Question

ng-if not updated directly

What I'm trying to do in my controller is that:
1. set variable vm.spinner = false;
2. send http request and after finish the request set vm.spinner = true;
i put that in my view:

<div ng-if='vm.spinner' class=spinner></spinner>

I tried to print vm.spinner in side the div it puts true, but if I printed it out of it it prints false as soon as the http request finished. It seems that I have two vm.spinner one in my controller and another inside the ng-if scope !
this is my html view:

<div ng-if="!vm.spinner && !" class="empty-exams" >
<img ng-src="assets/images/school/empty-fees.png" />
<div class="nothing-to-preview" translate="NothingToPreview"></div>
<button class="start-exams-now" type="button" name="button" ng- click="vm.newFeeModal()">[['Start' | translate]] [['Now' | translate]]</button>
<div ng-if='' class="subjects-container">
<div class="subjects-grid">
<div class="above-grid-header">
<span translate="Fees Configuration"></span>
<span class="pointer-cursor" ng-click="vm.newFeeModal()">+ [[ 'New Fee' | translate]]</span>
<div class="grid-itself" dir="[[lang=='en'?'ltr':'rtl']]" ui- grid="vm.gridOptions" ui-grid-edit ui-grid-pagination></div>
<div ng-if='vm.spinner' class="spinner"></div>

and I tried to watch the vm.spinned .. it has changed as soon as the request done!
controller code

FeesConfigController.$inject = ['ApiService', '$scope', 'ShareAnyData', 'FeesService', '$filter', '$uibModal', 'componentsPaths', 'logger'];
function FeesConfigController(ApiService, $scope, ShareAnyData, FeesService, $filter, $uibModal, componentsPaths, logger){
var instId = $;
var vm = this;
call: [FeesService.getFeeTypes, FeesService.getLeaderFeeTypes],
params: [[instId], []],
controller : FeesConfigControllerResolved,
vm: this,
controllerParams: [$scope, FeesService, $filter, logger, ShareAnyData, componentsPaths, $uibModal],

Note I update the vm.spinner in the ApiService.sendMultipleRequest
and I want to say that

<div ng-if="!vm.spinner && !" class="empty-exams" >

This div will be show as soon as the request done and the spinner is false
but the real spinner not disapear

Answer Source

just use ng-class

<div ng-if="vm.spinner">
    <div ng-class="{'spinner': vm.spinner}"></div>

This way, the animation is never waited for. I intentionally made a parent and a child divs, because spinners usually are inside some parent container.

PS: I just want to point out that the codes you put here, should be so simple and clear, with only the parameters needed for the issue.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download