Erreur: l'argument n'est pas une fonction, n'est pas défini

120

En utilisant AngularJS avec Scala Play, j'obtiens cette erreur.

Erreur: l'argument 'MainCtrl' n'est pas une fonction, n'est pas défini

J'essaye de créer un tableau composé des jours de la semaine.

Veuillez jeter un œil à mon code. J'avais vérifié le nom du contrôleur, mais cela semble correct. Remarque: Code utilisé à partir de cette réponse 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
source

15

En html où vous avez utilisé, ng-apppouvez-vous le changer enng-app=myApp

— Chandermani

J'ai eu la même erreur @Chandermani

— Kevin Meredith

Avez-vous essayé de supprimer la fermeture (IIFE) du code? Quand j'ai eu ce problème, c'était parce que j'avais une erreur PHP dans mon javascript.

— Kevin Beal

1

Vous pouvez trouver votre problème, par cette liste de contrôle: stackoverflow.com/a/26797874/930170

— Sergei Panfilov

Confirmez si vous avez ajouté MainCtrl.controller.js est ajouté dans le fichier BundleConfig.cs

— Syed Mohamed

107

Supprimer le []du nom ([myApp]) du module

angular.module('myApp', [])

Et ajoutez ng-app="myApp"au html et cela devrait fonctionner.

— Chandermani
source

1

Tout ce que j'avais à faire pour le faire fonctionner était la deuxième suggestion (c'est-à-dire définir ng-app = "myApp"). Si j'ai supprimé le [], j'ai une autre erreur.

— Jason

15

Le fait d'avoir le deuxième paramètre []indique que vous créez un nouveau module. La suppression du deuxième paramètre indique que vous récupérez un module existant. Donc, une possibilité de vérifier est si vous appelez angular.moduledeux fois, les deux fois en incluant le deuxième paramètre. Si tel est le cas, la dernière occurrence écrasera la seconde, masquant toutes les définitions de contrôleurs jusqu'à ce point.

— Carl G

26

Quand il dit de supprimer le, []il se réfère au premier paramètre où l'OP a [myApp]au lieu de myApp. Il ne parle pas du deuxième paramètre.

— Kevin Beal

1

Vérifiez le nom de votre contrôleur si vous utilisez des routes. Le nom du contrôleur dans la définition d'itinéraire est sensible à la casse.

— Latin Warrior

78

PREMIÈRE. vérifiez si vous avez correct controllerdans les définitions de route, comme les noms de contrôleur que vous définissez

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

des noms de contrôleurs différents dans cet exemple entraîneront des erreurs, mais cet exemple est correct

DEUXIÈME vérifiez si vous avez importé votre fichier javascript:

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

— pleerock
source

30

D'après mon expérience, votre «deuxième» est toujours le problème. J'oublie souvent d'importer mes contrôleurs dansindex.html

— msanford

C'était le deuxième dans mon cas aussi, j'ai oublié d'importer le fichier JS ...

— Saurabh Misra

26

J'ai eu le même message d'erreur (dans mon cas: "L'argument 'languageSelectorCtrl' n'est pas une fonction, est indéfini").

Après une comparaison fastidieuse avec le code de Angular seed, j'ai découvert que j'avais précédemment supprimé une référence au module des contrôleurs dans app.js. (repérez-le à https://github.com/angular/angular-seed/blob/master/app/js/app.js )

Alors j'ai eu ceci:

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

Cela a échoué.

Et quand j'ai ajouté la référence manquante:

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

Le message d'erreur a disparu et Angular a pu instancier à nouveau les contrôleurs.

— Bertrand
source

eu le même problème, mon problème était que j'ai oublié d'ajouter mon contrôleur au module d'application ... pourquoi cela ne se produit-il pas automatiquement ??? merci de toute façon!

— TheZuck

16

Parfois, cette erreur est le résultat de deux ng-app directives spécifiées dans le html. Dans mon cas par erreur j'avais spécifié ng-appdans mon htmltag et ng-app="myApp"dans le bodytag comme ceci:

<html ng-app>
  <body ng-app="myApp"></body>
</html>

— Gaurav
source

1

Cela m'est arrivé lorsque je n'ai pas ajouté l'injection au module myApp.

— Ghandhikus

Je vous remercie! Cela a résolu mon problème.

— bradden_gross

6

Cela m'a pris au sérieux 4 HEURES (y compris des recherches interminables sur SO) mais finalement je l'ai trouvé: par erreur (involontairement) j'ai ajouté un espace quelque part.

Peux tu le repérer?

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

Alors ... 4 heures plus tard, j'ai vu que ça devrait être:

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

Presque impossible à voir à l'œil nu.

Cela souligne l'importance vitale du contrôle des révisions (git ou autre) et des tests unitaires / de régression.

— Leo
source

1

Ma réponse n'était pas un espace supplémentaire mais cela m'a conduit à ma solution. J'avais à la Controllerplace controlleret c'était tout ce qu'il fallait.

— Grandizer

Et j'ai nommé mon fichier options-moda.controller.js mais je cherchais options-modal.controller.js DOH!

— theFish

Le mien était parce que j'ai oublié d'ajouter .js dans BundleConfig. Simple mais frustrant.

— Ege Bayrak

4

J'ai rencontré le même problème et dans mon cas, cela se produisait à la suite de ce problème:

J'ai fait définir les contrôleurs dans un module séparé (appelé `` myApp.controllers '') et injecté dans le module principal de l'application (appelé `` myApp '') comme ceci:

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

Un collègue a poussé un autre module de contrôleur dans un fichier séparé mais avec exactement le même nom que le mien (c'est-à-dire «myApp.controllers»), ce qui a causé cette erreur. Je pense que parce qu'Angular s'est confondu entre ces modules de contrôleur. Cependant, le message d'erreur n'a pas été très utile pour découvrir ce qui ne va pas.

— Lilla Eli
source

1

Cela devrait être corrigé en supprimant le deuxième paramètre du module ... Pour obtenir le module existant en utilisant angular.module ('myApp') sans le deuxième paramètre. ie angular.module ('myApp'). contoller (...)

— Santhosh

3

Dans mon cas (ayant une page d'aperçu et une page "ajouter") je l'ai obtenu avec ma configuration de routage comme ci-dessous. Il donnait le message pour AddCtrl qui ne pouvait pas être injecté ...

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

En raison de l' when('/'itinéraire, tous mes itinéraires sont allés à l'aperçu et le contrôleur n'a pas pu être mis en correspondance sur le rendu de la page / add route. C'était déroutant car j'ai vu le modèle add.html mais son contrôleur était introuvable.

Suppression de la route «/» lorsque la casse a résolu ce problème pour moi.

— EeKay
source

Je recevais également cette erreur et je m'arrachais les cheveux parce que cela provoquait l'échec de mes builds TFS. Commenter la route «/» l'a corrigé pour moi aussi. Maintenant, pour comprendre pourquoi!

— Phillip Copley

3

Si vous êtes dans un sous-module, n'oubliez pas de déclarer le module dans l'application principale. c'est à dire :

<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 vous ne déclarez pas subModule1 dans mainApp, vous obtiendrez un "[ng: areq] Argument" MyController "n'est pas une fonction, n'est pas défini.

— syjust
source

2

Le deuxième point d'Уmed était mon écueil, mais juste pour mémoire, peut-être que ça aide quelqu'un quelque part:

J'ai eu le même problème et juste avant de devenir fou, j'ai découvert que j'avais oublié d'inclure mon script de contrôleur.

Comme mon application est basée sur ASP.Net MVC, j'ai décidé de rester sain d'esprit en insérant l'extrait de code suivant dans mon App_Start / BundleConfig.cs

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

et dans Layout.cshtml

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

Maintenant, je n'aurai plus jamais à penser à inclure les fichiers manuellement. Avec le recul, j'aurais vraiment dû le faire lors de la mise en place du projet ...

— Xceno
source

1

J'ai eu une erreur raisonnable avec LoginController, que j'ai utilisé dans main index.html. J'ai trouvé deux façons de résoudre:

en définissant $ controllerProvider.allowGlobals (), j'ai trouvé ce commentaire dans la liste de modification angulaire "cette option peut être pratique pour migrer d'anciennes applications, mais veuillez ne pas l'utiliser dans de nouvelles!" commentaire original sur Angular

app.config (['$ controllerProvider', function ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);
mauvais constructeur du contrôleur d'enregistrement

avant

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

maintenant

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

'app' vient de app.js

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

— Dmitri Algazin
source

1

J'ai eu la même erreur avec une grosse erreur:

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

}]);

Tu vois ? j'ai oublié le '' autour du premier $ scope, la bonne syntaxe est bien sûr:

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

}]);

Une première erreur que je n'ai pas vue immédiatement était: " $ scope n'est pas défini ", suivi de " Error: [ng: areq] Argument 'TreeEditStepControlsCtrl' n'est pas une fonction, est indéfini "

— Elo
source

0

Cela pourrait-il être aussi simple que de mettre votre actif entre "" et tout ce qui nécessite des citations à l'intérieur avec ""?

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

devient

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

Cela pourrait causer des problèmes d'analyse

— Jay Tom
source

0

Pour résoudre ce problème, j'ai dû découvrir que j'avais mal orthographié le nom du contrôleur dans la déclaration des routes angulaires:

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

— MadPhysicist
source

0

Dans mon cas, c'était une simple faute de frappe dans index.html:

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

cela aurait dû être

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

sans le supplément sau nom du contrôleur.

— Tourbillon
source

0

Il s'avère que c'est le cache du navigateur, utilisant Chrome ici. Cochez simplement la case "Désactiver le cache" sous Inspecter (élément) a résolu mon problème.

— Weihui Guo
source

0

Parce que cela apparaît dans Google lorsque vous essayez de trouver une réponse à: "Erreur: l'argument" n'est pas une fonction, est indéfini ".

Il est possible que vous essayiez de créer le même module deux fois.

Le angular.module est un endroit global pour créer, enregistrer et récupérer des modules AngularJS.

Passer un argument récupère un angular.Module existant, alors que passer plus d'un argument crée un nouvel angular.Module

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

Exemple:

angular.module('myApp', []) Est utilisé pour créer un module sans injecter de dépendances.

angular.module('myApp') (Sans argument) est utilisé pour obtenir un module existant.

— MCollard
source

0

Il semble y avoir de nombreuses solutions de travail suggérant que l'erreur a de nombreuses causes réelles .

Dans mon cas, je n'avais pas déclaré le contrôleur dans app/index.html:

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

Erreur disparue.

— Ty Conway
source