Question

当我使用ng-controller =＆＃39; DoughnutCtrl＆＃39;在潜水中它会给出错误

错误：[ng：areq]参数＆＃39; DoughnutCtrl＆＃39;不是一个功能，未定义

我的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.module('portfolioApp',['chart.js']).中，您要添加chart.js模块，该模块是angularj-chart.js的其他模块

因此，使用HTML和JS的不同模块将无法正常工作。您必须在项目中选择一个模块并添加它的相关依赖。

在HTML中，您定义的chart-options="options"未绑定到$scope，因此您必须定义如下所示。

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

检查以下工作示例：

＆＃13;

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'
      }
    ];

  });

＆＃13;

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

＆＃13;

Answer 2

您可能已经将模块portfolioApp定义了两次。

// This creates the module and passes dependencies to it
angular.module('portfolioApp', ['chart.js']);

VS

// This only gets the module after it's been defined
angular.module('portfolioApp');

在这里试试这个问题，似乎是一个类似的错误：
Error: [ng:areq] from angular controller

Answer 3

您只需使用以下代码

'use strict';

  var app =   angular.module('portfolioApp',['chart.js']);
    app.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: ""
        }
      ]];
     });

Answer 4

我想你是指这个链接中的例子：http://carlcraig.github.io/tc-angular-chartjs/doughnut/

正如您所看到的，您需要注入的模块是'tc.chartjs'而不是'chart.js'。所以修好它：

var app =   angular.module('portfolioApp',['tc.chartjs']);

接下来确保你的div与ng-app用ng-controller

包围div

<div ng-app="portfolioApp">
  <div ng-controller="DoughnutCtrl">
     <canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend>
      </canvas>
   </div>
</div>

错误：[ng：areq]参数＆＃39; DoughnutCtrl＆＃39;不是一个功能，未定义

4 个答案: