ng-如果没有直接更新

Question

我想在我的控制器中做的是： 1. 设置变量vm.spinner = false； 2.发送http请求，请求完成后设置vm.spinner = true；我认为：

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

我尝试在 div 旁边打印 vm.spinner 它显示为 true，但是如果我打印出来它，它会在 http 请求完成后立即打印 false。似乎我有两个 vm.spinner 一个在我的控制器中，另一个在 ng-if 范围内！这是我的 html 观点：

<div ng-if="!vm.spinner && !vm.gridOptions.data.length" 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>
<div ng-if='vm.gridOptions.data.length' 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>
    <div class="grid-itself" dir="[[lang=='en'?'ltr':'rtl']]" ui- grid="vm.gridOptions" ui-grid-edit ui-grid-pagination></div>
  </div>
</div>
<div ng-if='vm.spinner' class="spinner"></div>

我试图观看 vm.spinned ..请求完成后它已经改变了！控制器代码

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

注意我在 ApiService.sendMultipleRequest 中更新了 vm.spinner 我想说

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

这个 div 将在请求完成并且微调器为 false 时立即显示

但真正的旋转器并没有消失

我有一个想法，但我不确定。我的 css 中的微调器 class 已激活！所以我认为我的浏览器在动画完成之前不会隐藏微调器！我现在不打算测试这个，直到与我的其他合作伙伴交谈以更新 css.

中的微调器 class

Answer 1

只需使用 ng-class

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

这样一来，动画就再也不用等了。我有意制作了一个父子 div，因为微调器通常位于某个父容器内。

PS：我只是想指出，你放在这里的代码，应该很简单明了，只有问题需要的参数。

ng-如果没有直接更新

ng-if not updated directly

angularjs

angularjs-scope

angular-ng-if

但真正的旋转器并没有消失