Chartjs-$scope variable do not respond to the onClick function of angular chart

by

0👍

✅

You’ll need a $scope.$apply(); as the last thing in the onClick function:

$scope.onClick = function(elements, evt) {
  $scope.cateClicked = elements[0]._model.label;
  console.log($scope.cateClicked);
  $scope.$apply();
 };

It looks like the bindings are not updated by the chart-click in the same way they would in ng-click.

0👍

Adding $timeout kicks in the digest cycle. This works! 

   angular
      .module('StarterApp', ['ngMaterial', 'chart.js'])
      .controller('AppCtrl', function ($scope, $timeout) {
        $scope.cateClicked = "?";
        $scope.color = ["#378A58", "#3FBF4E", "#83DF1F", "#AAD466"];
        $scope.labels = ["A", "B", "C", "D"];
        $scope.data = [1, 2, 3, 4];
        $scope.option = {legend: {position: 'right', display: true}};
        $scope.onClick = function(elements, evt) {

          $timeout(function(){
            $scope.cateClicked = elements[0]._model.label;
          $scope.tabIndex = 0;
          }, 0)

         };

    });

Leave a comment