Google Charts не обновляется при изменении данных Firebase

Question

Мне удалось подключить мою Firebase к Google Charts, которая отлично работает, но я изо всех сил пытаюсь показать простое сообщение с сообщением «нет данных», если там это не данные, которые оцениваются простым выражением if else, которое я объявил.

Например, у меня есть значение данных Firebase 'NA', настроенное для одного пользователя, что теоретически означает, что график не будет отображаться по умолчанию, и сообщение об ошибке будет отображаться при загрузке страницы и в любой точке это возвращается к этому значению. Однако это не так, и единственный способ вызвать его - щелкнуть кнопку 3D, которую я установил в файле HTML. Кроме того, когда данные Firebase изменяются на значение, большее нуля, сообщение об ошибке все еще отображается.

Вот мой код:

JS файла

var displayMode = true; 

$scope.statistics = function() { 
    $mdSidenav('left').close(); 
    $state.go('statistics'); 
    $timeout(function() { 
     setUpChart(); 
     var timer; 
     $(window).on('resize', function() { 
      clearTimeout(timer); 
      timer = setTimeout(function() { 
       setUpChart(); 
      }, 250); 
     }); 
    }); 
}; 

function setUpChart() { 

    $.ajax({ 
     url: '//www.google.com/jsapi', 
     dataType: 'script', 
     cache: true, 
     success: function() { 
      google.load('visualization', '1', { 
       'packages': ['corechart'], 
       'callback': drawChart 
      }); 
     } 
    }); 

    function drawChart() { 

     // This links to my Firebase url 
     userRef.on('value', function (snapshot) { 

      var pass = 0; 
      var fail = 0; 

      snapshot.forEach(function (snapshot) { 
       var userResults = snapshot.val(); 
       if (userResults.passFail === 'Pass') { 
        pass = pass + 1; 
       } 
       if (userResults.passFail === 'Fail') { 
        fail = fail + 1; 
       } 
      }); 

      if (pass === 0 && fail === 0) { 
       console.log('No data: ' + pass + ' & ' + fail); 
       $scope.error = true; 
       $scope.errorMessage = 'No user data available, please try 
       again later.'; 
      } else { 
       console.log('Is data: ' + pass + ' & ' + fail); 
       $scope.error = false; 
       $scope.errorMessage = null; 
       var data = new google.visualization.DataTable(); 
       data.addColumn('string', 'Result'); 
       data.addColumn('number', 'Delegates'); 
       data.addRows([ 
        ['Pass', pass], 
        ['Fail', fail] 
       ]); 

       var options = { 
        'is3D': displayMode, 
        'chartArea': {'width': '100%', 'height': '80%'}, 
        'legend': {'position': 'top', 'alignment': 'center'} 
       }; 

       var chart = new 
     google.visualization.PieChart(document.getElementById('pieChart')); 
       chart.draw(data, options); 
      } 

     }); 

    } 

} 

// Changes chart type to 3D or top view on a butto click 
$scope.chartFormat = function() { 
    if (displayMode == true) 
     displayMode = false; 
    else 
     displayMode = true; 
    setUpChart(); 
}; 

HTML

<div class="container" style="padding-top: 100px; padding-bottom: 50px"> 

<button data-ng-model="displayType" style="display: block; margin: 0 auto" 
     data-ng-click="displayType=displayType ? false : true; 
     chartFormat()" 
     class="btn btn-default btn-md" type="button"><i class="material- 
     icons">3d_rotation</i></button> 

<div data-ng-if="error" class="alert alert-danger"> 
    <span data-ng-if="errorMessage" class="glyphicon glyphicon-remove"> 
    </span><strong> {{errorMessage}}</strong> 
</div> 

<div id="pieChart" style="display: block; margin: 0 
auto; width: 100%; height: 500px"></div> 

</div> 

Answer 1

Ваш код в userRef.on('value', function (snapshot) { пробегов асинхронно всякий раз, когда данные в Firebase изменений. В этот момент AngularJS не ожидает изменений в $scope, поэтому он их не видит.

Решение сделать AngularJS известно о том, что вы изменили $scope либо по телефону $scope.$apply(), как charlieftl предложил или обернув его в $timeout() так, что она будет подобран в следующем переваривать цикла:

userRef.on('value', function (snapshot) { 
    $timeout(function() { 
     var pass = 0; 
     var fail = 0; 

     snapshot.forEach(function (snapshot) { 
      var userResults = snapshot.val(); 
      if (userResults.passFail === 'Pass') { 
       pass = pass + 1; 
      } 
      if (userResults.passFail === 'Fail') { 
       fail = fail + 1; 
      } 
     }); 

     if (pass === 0 && fail === 0) { 
      console.log('No data: ' + pass + ' & ' + fail); 
      $scope.error = true; 
      $scope.errorMessage = 'No user data available, please try 
      again later.'; 
     } else { 
      console.log('Is data: ' + pass + ' & ' + fail); 
      $scope.error = false; 
      $scope.errorMessage = null; 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Result'); 
      data.addColumn('number', 'Delegates'); 
      data.addRows([ 
       ['Pass', pass], 
       ['Fail', fail] 
      ]); 

      var options = { 
       'is3D': displayMode, 
       'chartArea': {'width': '100%', 'height': '80%'}, 
       'legend': {'position': 'top', 'alignment': 'center'} 
      }; 

      var chart = new 
    google.visualization.PieChart(document.getElementById('pieChart')); 
      chart.draw(data, options); 
     } 

    }); 

}); 

Answer 2

Если у кого-то возникла аналогичная проблема с моим выше, просто добавьте data-ng-init = "function_name_here()" в сообщение об ошибке, которое вы хотите показать в своем html, если у вашей диаграммы Google нет данных.

Никогда не думал об этом раньше, но сейчас обрабатывает удовольствие и динамически отображает сообщение об ошибке в моем случае и удаляет сообщение, если данные существуют!