Error: el argumento no es una función, no está definido

120

Usando AngularJS con Scala Play, recibo este error.

Error: el argumento 'MainCtrl' no es una función, no está definido

Estoy intentando crear una tabla que consta de los días de la semana.

Por favor, eche un vistazo a mi código. Había comprobado el nombre del controlador, pero parece correcto. Nota: Código utilizado de esta respuesta SO

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js 

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());
angularjs  playframework 
— Kevin Meredith
fuente
15
En html donde lo ha utilizado, ¿ ng-apppuede cambiarlo ang-app=myApp
— Chandermani
Tengo el mismo error @Chandermani
— Kevin Meredith
¿Ha intentado eliminar el cierre (IIFE) del código? Cuando tuve este problema, fue porque tuve un error de PHP en mi javascript.
— Kevin Beal
1
Puede averiguar su problema con esta lista de verificación: stackoverflow.com/a/26797874/930170
— Sergei Panfilov
Confirme si ha agregado MainCtrl.controller.js se agregó en el archivo BundleConfig.cs
— Syed Mohamed

Respuestas:

107

Eliminar []del nombre ([myApp]) del módulo

angular.module('myApp', [])

Y agregue ng-app="myApp"al html y debería funcionar.

— Chandermani
fuente
1
Todo lo que tuve que hacer para que funcionara fue la segunda sugerencia (es decir, establecer ng-app = "myApp"). Si eliminé el [], recibí otro error.
— Jason
15
Tener el segundo parámetro []indica que está creando un nuevo módulo. Eliminar el segundo parámetro indica que está recuperando un módulo existente. Por lo tanto, una posibilidad de verificar es si está llamando angular.moduledos veces, ambas veces incluido el segundo parámetro. Si es así, la última aparición sobrescribirá la segunda, ocultando cualquier definición de controladores hasta ese momento.
— Carl G
26
Cuando dice que eliminemos el, []se refiere al primer parámetro donde el OP tiene en [myApp]lugar de myApp. No está hablando del segundo parámetro.
— Kevin Beal
1
Verifique el nombre de su controlador si está utilizando rutas. El nombre del controlador en la definición de ruta distingue entre mayúsculas y minúsculas.
— Latin Warrior
78

PRIMERO. Verifique si tiene correctas controlleren las definiciones de ruta, igual que los nombres de controlador que está definiendo

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

diferentes nombres de controlador en este ejemplo conducirán a errores, pero este ejemplo es correcto

SEGUNDO verifique si ha importado su archivo javascript:

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

— pleerock
fuente
30
En mi experiencia, su "segundo" es siempre el problema. A menudo me olvido de importar mis controladores aindex.html
— msanford
También fue el segundo en mi caso, olvidé importar el archivo JS ...
— Saurabh Misra
26

Tuve el mismo mensaje de error (en mi caso: "El argumento 'languageSelectorCtrl' no es una función, no está definido").

Después de una tediosa comparación con el código de Angular seed, descubrí que previamente había eliminado una referencia al módulo de controladores en app.js. (consúltelo en https://github.com/angular/angular-seed/blob/master/app/js/app.js )

Entonces tuve esto:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

Esto falló.

Y cuando agregué la referencia que faltaba:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

El mensaje de error desapareció y Angular pudo instanciar los controladores nuevamente.

— Bertrand
fuente
Tuve el mismo problema, mi problema fue que olvidé agregar mi controlador al módulo de la aplicación ... ¿por qué esto no sucede automáticamente? gracias de todos modos!
— TheZuck
16

Algunas veces este error es el resultado de dos ng-app directivas especificadas en el html. En mi caso, por error, lo había especificado ng-appen mi htmletiqueta y ng-app="myApp"en la bodyetiqueta de esta manera:

<html ng-app>
  <body ng-app="myApp"></body>
</html>
— Gaurav
fuente
1
Me pasó cuando no agregué la inyección al módulo myApp.
— Ghandhikus
¡Gracias! Esto solucionó mi problema.
— bradden_gross
6

Esto me tomó 4 HORAS en serio (incluyendo búsquedas interminables en SO) pero finalmente lo encontré: por error (sin querer) agregué un espacio en alguna parte.

¿Puedes distinguirlo?

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

Entonces ... 4 horas después vi que debería ser:

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

Casi imposible de ver a simple vista.

Esto enfatiza la importancia vital del control de revisiones (git o lo que sea) y las pruebas de unidad / regresión.

— León
fuente
1
Mi respuesta no fue un espacio extra, pero me llevó a mi solución. Tenía en Controllerlugar de controllery eso fue todo lo que necesité.
— Grandizer
¡Y nombré a mi archivo options-moda.controller.js pero estaba buscando options-modal.controller.js DOH!
— theFish
El mío fue porque olvidé agregar .js en BundleConfig. Simple pero frustrante.
— Ege Bayrak
4

Me he encontrado con el mismo problema y, en mi caso, estaba sucediendo como resultado de este problema:

Tenía los controladores definidos en un módulo separado (llamado 'myApp.controllers') y los inyecté en el módulo principal de la aplicación (llamado 'myApp') así:

angular.module('myApp', ['myApp.controllers'])

Un colega empujó otro módulo de controlador en un archivo separado pero con el mismo nombre exacto que el mío (es decir, 'myApp.controllers') lo que causó este error. Creo que porque Angular se confundió entre esos módulos de controlador. Sin embargo, el mensaje de error no fue muy útil para descubrir qué estaba mal.

— Lilla Eli
fuente
1
Esto debería solucionarse eliminando el segundo parámetro en el módulo ... Para obtener el módulo existente usando angular.module ('myApp') sin el segundo parámetro. es decir, angular.module ('myApp'). contoller (...)
— Santhosh
3

En mi caso (tener una página de descripción general y una página de "agregar") obtuve esto con mi configuración de enrutamiento como se muestra a continuación. Estaba dando el mensaje para AddCtrl que no se podía inyectar ...

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

Por el when('/' ruta, todas mis rutas fueron a la vista general y el controlador no pudo coincidir en la representación de la página / agregar ruta. Esto fue confuso porque vi la plantilla add.html pero su controlador no se encontraba por ninguna parte.

Eliminar la ruta '/' cuando el caso solucionó este problema para mí.

— EeKay
fuente
También recibí este error y me estaba arrancando el pelo porque estaba causando que mis compilaciones de TFS fallaran. Al comentar la ruta '/', también me lo arregló. ¡Ahora para averiguar por qué!
— Phillip Copley
3

Si está en un submódulo, no olvide declarar el módulo en la aplicación principal. es decir:

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

Si no declara subModule1 en mainApp, obtendrá un "[ng: areq] Argument" MyController "no es una función, no está definido.

— syjust
fuente
2

El segundo punto de Уmed fue mi trampa, pero solo para que conste, tal vez esté ayudando a alguien en alguna parte:

Tuve el mismo problema y justo antes de volverme loco descubrí que me había olvidado de incluir mi script de controlador.

Como mi aplicación se basa en ASP.Net MVC, decidí mantenerme cuerdo insertando el siguiente fragmento en mi App_Start / BundleConfig.cs

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

y en Layout.cshtml

<head>
...
   @Scripts.Render("~/app")
...
</head>

Ahora no tendré que pensar en incluir los archivos manualmente nunca más. En retrospectiva, debería haber hecho esto al configurar el proyecto ...

— Xceno
fuente
1

Recibí un error sano con LoginController, que usé en el index.html principal. Encontré dos formas de resolverlo:

  1. configurando $ controllerProvider.allowGlobals (), encontré ese comentario en la lista de cambios Angular "esta opción podría ser útil para migrar aplicaciones antiguas, pero no la use en las nuevas". comentario original sobre Angular

    app.config (['$ controllerProvider', function ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);

  2. constructor incorrecto del controlador de registro

antes de

LoginController.$inject = ['$rootScope', '$scope', '$location'];

ahora

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

'app' proviene de app.js

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);
— Dmitri Algazin
fuente
1

Tuve el mismo error con un gran error:

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

Lo ves ? Olvidé el '' alrededor del primer $ scope, la sintaxis correcta es, por supuesto:

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

Un primer error que no vi inmediatamente fue: " $ scope no está definido ", seguido de " Error: [ng: areq] Argument 'TreeEditStepControlsCtrl' no es una función, no está definido "

— Elo
fuente
0

¿Podría ser tan simple como incluir su activo en "" y lo que necesite citas en el interior con ''?

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

se convierte en

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

Eso podría estar causando algunos problemas al analizar

— Jay Tom
fuente
0

Para solucionar este problema, tuve que descubrir que escribí mal el nombre del controlador en la declaración de las rutas angulares:

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })
— MadPhysicist
fuente
0

En mi caso fue un simple error tipográfico en index.html:

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

eso debería haber sido

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

sin el extra sen el nombre del controlador.

— Remolino
fuente
0

Resulta que es la caché del navegador, usando Chrome aquí. Simplemente marque la casilla "Deshabilitar caché" en Inspeccionar (elemento) resolvió mi problema.

— Weihui Guo
fuente
0

Porque esto aparece en Google cuando se intenta encontrar una respuesta a: "Error: Argumento '' no es una función, no está definido".

Es posible que esté intentando crear el mismo módulo dos veces.

El angular.module es un lugar global para crear, registrar y recuperar módulos AngularJS.

Pasar un argumento recupera un angular.Module existente, mientras que pasar más de un argumento crea un nuevo angular.Module

Fuente: https://docs.angularjs.org/api/ng/function/angular.module#overview

Ejemplo:

angular.module('myApp', []) Se utiliza para crear un módulo sin inyectar dependencias.

angular.module('myApp') (Sin argumento) se usa para obtener un módulo existente.

— MCollard
fuente
0

Parece haber muchas soluciones que sugieren que el error tiene muchas causas reales .

En mi caso, no había declarado el controlador en app/index.html:

<scipt src="src/controllers/controller-name.controller.js"></script>

Error desaparecido.

— Ty Conway
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.