javascript - 错误 : [ng:areq] Argument 'DoughnutCtrl' is not a function, 未定义

Question

当我在潜水中使用 ng-controller='DoughnutCtrl' 时，出现错误

Error: [ng:areq] Argument 'DoughnutCtrl' is not a function, got undefined

我的chart.js

'use strict';

angular.module('portfolioApp',['chart.js']).
controller('DoughnutCtrl', function ($scope) 
{
$scope.data = [[
    {
      value: 80,
      color: "#949FB1",
      highlight: "#A8B3C5",
      label: "80%"
    },
    {
      value: 20,
      color: "#4D5360",
      highlight: "#616774",
      label: ""
    }

  ],
  [
    {
      value: 70,
      color: "#000000",
      highlight: "#A8B3C5",
      label: "80%"
    },
    {
      value: 30,
      color: "#ffffff",
      highlight: "#167740",
      label: ""
    }
  ]];
 });

我的html代码是

<div ng-app="portfolioApp">
<div ng-controller="DoughnutCtrl">

  <canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>

</div>

我是 angularjs 的新手，谁能解释一下为什么会发生这种情况？

Answer 1

这里的问题是您尝试在 Canvas 元素中使用指令 tc-chartjs-doughnut

<canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>

这是 tc-angular-chartjs模块。

在 Angular 模块中，angular.module('portfolioApp',['chart.js']).，您要添加 chart.js 模块，它是其他模块的angularj-chart.js

因此对 HTML 和 JS 使用不同的模块是行不通的。您必须选择一个模块并在项目中添加其相关依赖项。

在 HTML 中，您已经定义了 chart-options="options" ，它未绑定(bind)到 $scope，因此您必须定义如下所示。

$scope.options = {}; // Add available options based on requirement

检查下面的工作示例:

angular
  .module('myModule',['tc.chartjs'])
  .controller( 'DoughnutCtrl', function( $scope ) {

    // Chart.js Data
    $scope.data = [
      {
        value: 300,
        color:'#F7464A',
        highlight: '#FF5A5E',
        label: 'Red'
      },
      {
        value: 50,
        color: '#46BFBD',
        highlight: '#5AD3D1',
        label: 'Blue'
      },
      {
        value: 100,
        color: '#FDB45C',
        highlight: '#FFC870',
        label: 'Yellow'
      }
    ];

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://carlcraig.github.io/tc-angular-chartjs/js/vendor/tc-angular-chartjs.min.js"></script>
<div ng-app="myModule">
  <div ng-controller="DoughnutCtrl">

    <canvas tc-chartjs-doughnut chart-data="data" auto-legend></canvas>

  </div>
</div>