1

estoy realizando unos gráficos con la librería Angular chart js, he probado con los ejemplos que encontré en la página y funciona correctamente pero al intentar realizar dos gráficos en la misma página consigo el siguiente erro

Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=BarCtrl&p1=not%20a%20function%2C%20got%20undefined

He aquí mi codigo HTML:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>Barra</title>
 <link href="bootstrap.css" rel="stylesheet">
</head>
<body">
 <div ng-app="app">
  <div id="container" class="container">
   <div class="row" ng-controller="BarCtrl">
    <div class="col-lg-6 col-sm-12">
     <div class="panel panel-default">
      <div class="panel-heading">Barra</div>
      <div class="panel-body">
        <canvas id="base" class="chart chart-bar"
          chart-data="data" chart-labels="labels" chart-series="series">
        </canvas> 
      </div>
     </div>
   </div>
  </div>
 </div>
</div>

<div ng-app="app1">
 <div id="container" class="container">
  <div class="row" ng-controller="BarCtrl">
   <div class="col-lg-6 col-sm-12">
    <div class="panel panel-default">
      <div class="panel-heading">Barra1</div>
      <div class="panel-body">
        <canvas id="base" class="chart chart-bar"
          chart-data="data" chart-labels="labels" chart-series="series">
        </canvas> 
      </div>
     </div>
    </div>
   </div>
 </div>
</div>

<script src="angular/angular.min.js"></script>
<script src="angular/Chart.min.js"></script>
<script src="angular/angular-chart.min.js"></script>
<script src="angular/angular-chart.js"></script>
<script src="barra.js"></script>
</body>
</html>

y este es el Js:

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) { $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; $scope.series = ['Series A']; $scope.data = [
[65, 59, 80, 81, 56, 55, 40]]; });

angular.module("app1", ["chart.js"]).controller("BarCtrl", function ($scope {$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; $scope.series = ['Series A']; $scope.data = [
[65, 59, 80, 81, 56, 55, 40]]; });

Son datos solamente de prueba por eso son los mismos, que creen que puede fallar para que me esté saliendo este error ?

1
  • Usar varios ng-app en tu aplicación no es correcto ya que sólo el primero surtirá efecto, también estas incluyendo la librería angular-chart dos veces, una minificada y otra sin minificar. El código javascript que incluyes está declarado en barra.js o es otro fichero?
    – devconcept
    Commented el 11 ago. 2016 a las 21:04

1 respuesta 1

1

Este es tu error:

Error: ng:areq Bad Argument

Argument 'BarCtrl' is not a function, got undefined

¿Qué está ocurriendo?

La directiva ng-controller está llamando a "BarCtrl" un controlador que todavía no existe.

Te falla porque "barra.js" lo incluyes más tarde con tu:

<script src="barra.js"></script>

Deberías declararlo al principio de tu HTML antes de que se produzca la llamada con ng-controller.

Por otro lado lo que te comenta devconcept es totalmente cierto. Te recomiendo que eches un vistazo a la guia de estilo de ToddMoto (está en castellano):

https://github.com/johnpapa/angular-styleguide/blob/master/a1/i18n/es-ES.md

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.