ng-if 不直接更新答案

【问题标题】：ng-if not updated directlyng-if 不直接更新
【发布时间】：2016-08-05 14:32:07
【问题描述】：

我想要在我的控制器中做的是： 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" >

一旦请求完成并且微调器为 false，该 div 将立即显示

但真正的微调器并没有消失

我有一个想法，但我不确定。我的 CSS 中的微调器类是动画的！所以我认为我的浏览器在动画完成之前不会隐藏微调器！在与我的其他合作伙伴交谈以更新 css 中的微调器类之前，我现在不会对此进行测试。

【问题讨论】：

能否提供控制器代码？
好的，我想编辑我的帖子
我想一个问题是你为什么要在你的服务中绑定你的视图？这应该保存在控制器中。
这是一个例子：jsfiddle.net/93qzds0v
这就像一个假控制器..我这样做是因为性能问题..我将解析中的所有内容都翻译给控制器，然后我将真实控制器传递给服务以在 http 请求后执行完成

标签： angularjs angularjs-scope angular-ng-if

【解决方案1】：

只使用 ng-class

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

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

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

【讨论】：