current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

I have a chart in the page. When one click in the chart, the onClick function will be called and it will know which category of the chart has been clicked by user. I created a div to show $scope.cateClicked. However, the display value of $scope.cateClicked do not change in the div, while in console, I can see this value has been changed by the function indeed.

See my example here: http://codepen.io/lyzy0906/pen/ggWqpJ

The div and the canvas:

<div>You clicked {{cateClicked}}</div>
<canvas class="chart chart-pie" chart-click="onClick" chart-data="data" chart-labels="labels" chart-colors="color" chart-options="option"></canvas>

The onClick function:

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

How can I make the DIV to display the value of $scope.cateClicked after one has clicked in the chart? Thanks.

share|improve this question
    
You need to initiate digest cycle. Use $scope.apply or better use $timeout. – Aniket Sinha 22 hours ago
up vote 0 down vote accepted

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.

share|improve this answer
up vote 0 down vote

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)

         };

    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.