$scope 变量不响应 angular 图表的 onClick 函数

Question

我在页面中有一个图表。当点击图表时，会调用onClick函数，它会知道用户点击了图表的哪个类别。我创建了一个 div 来显示 $scope.cateClicked。然而，$scope.cateClicked的显示值在div中没有改变，而在控制台中，我可以看到这个值确实被函数改变了。

在此处查看我的示例：http://codepen.io/lyzy0906/pen/ggWqpJ

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

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 函数中的最后一件事：

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

chart-click 似乎没有像在 ng-click 中那样更新绑定。

Answer 2

在摘要循环中添加 $timeout。这行得通！

   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)

         };

    });

$scope 变量不响应 angular 图表的 onClick 函数

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

angularjs

angularjs-scope

chart.js

angular-chart