ng-if 没有在变量更改时更新 DOM答案

【问题标题】：ng-if not updating DOM on variable changeng-if 没有在变量更改时更新 DOM
【发布时间】：2019-01-28 21:00:44
【问题描述】：

我正在向我的谷歌地图添加 loading_gif，并使用 google.maps.event.addListener() 来确定地图何时完成加载并更新变量以停止加载微调器。看起来一切都按预期工作，我看到变量已更新，但微调器仍然显示。

我的加载微调器：

<div style="position:absolute;z-index:99;top:85px;left:38%;" ng-if="mapLoader==0">
  <p style="text-align:center;">
    LOADING MAP...
    <br><img style="height:100px;" ng-src="img/ajax_loading.gif">
  </p>
</div>

应用程序启动，加载开始，地图在后台加载，但微调器永远不会消失。在控制台中，我看到所有控制台消息都打印出来了 - 包括指示地图已完成加载并设置 $scope.mapLoader = 1 的消息，这应该停止带有加载 gif 的 DIV 以隐藏....但它没有

我的控制器：

.controller('MapCtrl', function($scope,$ionicModal,$ionicPopover,$ionicSlideBoxDelegate,$rootScope,$state,constants,apiService) {

  $scope.mapLoader = 0 ;
  $scope.mapTrigger = 0 ;

  // recursive function to test for maps finished loading
  //setMap is a global variable set elsewhere.
  function checkLoader() {
    console.log("CHECKING LOADER") ;
    if ($scope.mapLoader == 0) {
      if (setMap && $scope.mapTrigger == 0) {
        $scope.mapTrigger = 1 ;
        google.maps.event.addListenerOnce(setMap,'tilesloaded', (function() {
          console.log("\tMAP LOADED") ; // These two successfully print out
          $scope.mapLoader = 1 ;        // this should stop the DIV from displaying.
          console.log($scope.mapLoader) ; // These two successfully print out
        })) ; 
      }
      setTimeout(function() {
        console.log("\tChecking Map") ;
        checkLoader() ;                // repeat function again
      },500) ;                         // 1/2 second intervals
    } 
  }

  if ($scope.mapLoader == 0) {
    checkLoader() ;
  } else {
    $scope.mapLoader = 1 ;
  }
})

打印到控制台：

CHECKING LOADER
    Checking Map
CHECKING LOADER
    Checking Map
CHECKING LOADER
    Checking Map
CHECKING LOADER
    MAP LOADED
    1
Checking Map
CHECKING LOADER

【问题讨论】：

我什至将ng-if="mapLoader==0" 更改为ng-show="mapLoader==0"，但它仍然无法正常工作。我在这里错过了什么？

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

【解决方案1】：

这样做

   google.maps.event.addListenerOnce(setMap,'tilesloaded', (function() {
       $scope.$apply(function() {
           $scope.mapLoader = 1;
       });
   })) ;

你必须告诉 AngularJS 你有一些 Angular 不跟踪的事件，你需要立即应用所做的更改。

阅读更多 $apply here 和 here。

【讨论】：

谢谢。那成功了。现在我需要阅读为什么...感谢链接，现在就阅读它。