$ scope変数が角度グラフのonClick関数に応答しません

Question

私はページにグラフがあります。チャート内の1つのクリックをクリックすると、onClick関数が呼び出され、ユーザーがクリックしたチャートのカテゴリがわかります。私は$scope.cateClickedと表示するようにdivを作成しました。しかし、$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.cateをクリックした後にクリックしますか？ありがとう。

Answer 1

あなたはonClick関数の中で最後のものとして$scope.$apply();が必要になります：

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

バインディングは、彼らがNGクリックの場合と同じようにクリックしてチャートによって更新されていないように見えます。

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) 

     }; 

    });