Ng-click не работает с chart.js

Я создал круговую диаграмму с chartjs, но когда я нажимаю на определенный фрагмент, событие click не выполняется.

Вид:

<div ng-controller="ProjectsController">
<a>Projects</a>
<br>
</br>
<canvas id="myPieChart" width="600" height="600" ng-click="chartClick()"></canvas>

Контроллер:

'use strict';

angular.module('Progs')

.controller('ProjectsController', ['$scope', '$rootScope', '$http', '$window', '$state',
function ($scope, $rootScope, $http, $window, $state) {
  //...
  $scope.chartClick = function (event) {
    console.log('chartClick');
    //console.log("segment: " + $scope.chart.getSegmentsAtEvent(event));
  }
  //...
}

Что не так с моим кодом?

Обратите внимание: я не использую angular-chart.js

Ответ 1

Я изучил вашу проблему и прочитал ответ @MohammadMansoor. Я попытался реализовать решение для вас.

(function(angular) {
  var app = angular.module("app", []);
  app.controller("ChartCtrl", ['$scope', function($scope) {
    $scope.hello = "Hello, World";
    $scope.canvas = document.getElementById("myPieChart");
    $scope.ctx = $scope.canvas.getContext("2d");
    $scope.data = [{
      value: 300,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
    }, {
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
    }, {
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
    }];
    $scope.myPieChart = new Chart($scope.ctx).Pie($scope.data,{});
    $scope.chartClick = function (event) {
        console.log('chartClick');
        console.log($scope.myPieChart.getSegmentsAtEvent(event));
    }
    $scope.canvas.onclick = $scope.chartClick;
  }]);
})(angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<div ng-app="app" ng-controller="ChartCtrl">
  <h1>{{hello}}</h1>
  <a>Projects</a>
  <br>
  <canvas id="myPieChart" width="600" height="600"></canvas>
</div>

Ответ 2

Использовать функцию html onclick и получить доступ к области с помощью любого id

Пример:

<canvas id="myPieChart" width="600" height="600" onclick="angular.element("#myPieChart").scope().chartClick();"></canvas>

Ответ 3

Если вы используете angular-chart, используйте chart-click = "chartClick".

Я думаю, что chart.js переопределяет событие click и не передает его на angular, поэтому вы не можете запустить событие ng-click.

Вы можете попытаться связать событие click внешне с помощью angular.element('#myPieChart'), но я не уверен в этом.