$ scope变量不响应角度图的onClick函数

Question

我在页面中有一个图表。当在图表上点击一下，onClick函数就会被调用，并且它会知道用户点击了图表的哪个类别。我创建了一个div来显示$scope.cateClicked。但是，$scope.cateClicked的显示值在div中不会改变，而在控制台中，我可以看到该值已被函数更改。

在这里看到我的例子：http://codepen.io/lyzy0906/pen/ggWqpJ

div和画布：

<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> 

的onclick功能：

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

我怎样才能让DIV显示$的价值在图表中点击后，scope.cateClicked？谢谢。

Answer 1

你需要一个$scope.$apply();作为onClick函数的最后一件事：在他们的NG-点击会以同样的方式

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

它看起来像由不更新绑定图表单击。

Answer 2

在摘要循环中添加$超时踢球。这工作！

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) 

     }; 

    });