Question

我在控制器中尝试做的是： 1. set variable vm.spinner = false; 2.发送http请求并在完成请求后设置vm.spinner = true; 我把它放在我看来：

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

我尝试在div中放置vm.spinner，但是如果我将它打印出来，它会在http请求完成后立即打印出来。似乎我的控制器中有两个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

但真正的微调器不会消失

我有个主意，但我不确定。我的CSS中的微调器类是动画的！所以我认为我的浏览器在动画完成之前不会隐藏微调器！我现在不打算测试这个，直到与我的另一个伙伴交谈，以更新css中的微调器类。

1 个答案:

答案 0 :(得分：0)

Answer 1

只需使用ng-class

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

这样，动画永远不会等待。我故意制作一个父母和一个孩子div，因为微调器通常在一些父容器内。

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

ng-如果没有直接更新

但真正的微调器不会消失

1 个答案: