Question

我在页面中有一个图表。单击图表时，将调用onClick函数，它将知道用户单击了哪个类别的图表。我创建了一个显示$scope.cateClicked的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>的显示值在div中没有变化，而在控制台中，我可以看到这个值确实被函数改变了。

请参阅我的示例：De Morgan's law

div和画布：

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

onClick功能：

{{1}}

如何在点击图表后让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();
 };

看起来绑定不会通过图表单击更新，就像在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变量不响应角度图的onClick函数

2 个答案: