ng-if如果在AngularJS中$ scope var发生更改时不更新

Question

在我看来，我有这个：

122

在我的控制器中我有：

<div class="tab-loading-container" ng-if="mapStatus.loading =='true'">
    <div class="tab-loading">Loading map</div>
</div>

然后在满足某些条件时更新$scope.mapStatus = {}; 使用的范围var的各种函数，例如脱机等（例如：

ng-if

我的问题是虽然范围var正在正确更改（通过良好的＆console.log和angular chrome扩展名确认），视图中的function enableMap () { $scope.mapStatus.loading = false; } 永远不会更新/添加/删除以显示/删除div。

我尝试过使用$ apply（虽然我对它的理解并不是很好），例如：

ng-if

但会引发function enableMap () { $scope.$apply(function() { $scope.mapStatus.loading = false; }); }

等错误

感觉我错过了一些明显的东西:(

根据要求提供更多代码：

Error: [$rootScope:inprog] $apply already in progress

要确认更改范围变量，请点击此处AngularJS chrome扩展程序的屏幕截图：

Answer 1

我不确定这是否会解决您的问题，但在您进入这个问题之前，我建议您删除对$ scope的引用并使用controllerAs。我已经看到很多实例，直接添加到$ scope的属性/方法的引用没有特别的原因。特别是我建议你：

• 删除你注入$ scope的地方，
• 将var ctrl=this添加到控制器中的构造函数代码中，
• 将控制器中对$ scope的所有引用更改为ctrl，
• 将controllerAs vm添加到加载控制器的位置
• 将视图中控制器属性的所有引用更改为以vm为前缀。

您可能会很幸运，这可能只是解决您的问题，但不管怎样，这仍然是使用控制器的更好方法。 （如果你使用Angular 1.5+，我真的建议你在你走得太远之前将它重构为一个组件。）

Answer 2

我已经改变了它，所以它只是一个布尔值，而不是将它与字符串进行比较。 您是否曾将$scope.mapStatus.loading设置为true？否则，它永远不会显示，因为它永远都是假的。

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.mapStatus = {};

  $scope.hideMe = function() {
    $scope.mapStatus.loading = false;
  }

  $scope.showMe = function() {
    $scope.mapStatus.loading = true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div class="tab-loading-container" ng-if="mapStatus.loading">
      <div class="tab-loading">Loading map</div>
    </div>
    <button ng-click="hideMe()">Hide Me</button>
    <button ng-click="showMe()">Show Me</button>
  </div>
</div>

Answer 3

（如果有人使用angular v2 +遇到此问题，我发布此答案）

如果表达式ngIf指令通过来自外部角度区域的（异步）调用更新，则可能会发生此问题。这不会导致角度变化检测，因此您的视图不会更新，直到下一次更改检测发生。您可以从以下链接了解有关区域和更改检测的详情：zones change detection

当我将google登录集成到我的组件时，我遇到了这个问题。每当用户登录或退出时，第三方Google图书馆都会调用signInChangeListener：

export class GoogleLoginService {
   signedIn: boolean = false;
   ...
   signInChangeListener(isSignedIn) {
       this.signedIn = isSignedIn;
   }
}

在我的HTML中，我有：

<div *ngIf="signedIn"> ... </div>

我必须更改我的代码，以便通过angular检测到更改：

import { Injectable, NgZone } from '@angular/core';

export class GoogleLoginService {
   signedIn: boolean = false;

   constructor(private ngZone: NgZone) { }
   ...
   signInChangeListener(isSignedIn) {
      // Run the value change inside angular 
      this.ngZone.run(() => {
         this.signedIn = isSignedIn;
      });
   }
}