нг-если не обновление DOM при изменении переменной - PullRequest
Новая
       15

нг-если не обновление DOM при изменении переменной

0 голосов
/ 29 января 2019

Я добавляю loading_gif к своим картам Google и использую 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, который должен остановить DIV с загрузочным gif, чтобы скрыть ...., но это не

Мой контроллер: 

.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

1 Ответ

0 голосов
/ 29 января 2019

Сделайте это так 

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

Вы должны сообщить AngularJS, что у вас есть некоторые события, которые не отслеживаются Angular, и вам необходимо применить изменения, которые были сделаны в одно мгновение.

Подробнее о $apply здесь и здесь .

...