Erreur: l'argument n'est pas une fonction, indéfini
En utilisant AngularJS avec Scala Play, je reçois cette erreur.
Erreur: l'argument 'MainCtrl' n'est pas une fonction, indéfini
J'essaie de créer une table composée des jours de la semaine.
S'il vous plaît jeter un oeil à mon code. J'avais vérifié le nom du contrôleur, mais cela semble correct. Remarque: Code utilisé à partir de ce SO answer
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"]
}
});
}());
Supprimez le [] du nom ([myApp]) du module.
angular.module('myApp', [])
Et ajoutez ng-app="myApp" au code HTML et cela devrait fonctionner.
PREMIER. vérifie si vous avez correct controller dans les définitions de route, identique aux 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';
}]);
différents noms de contrôleur dans cet exemple entraîneront des erreurs, mais cet exemple est correct
SECONDEvérifie si vous avez importé votre fichier javascript:
<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>
J'ai eu le même message d'erreur (dans mon cas: "Argument 'languageSelectorCtrl' n'est pas une fonction, eu undefined").
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 controllers dans app.js. (repérez-le sur 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 peut instancier à nouveau les contrôleurs.
Parfois, cette erreur résulte des directives deux ng-app spécifiées dans le html . Dans mon cas, par erreur, j’avais spécifié ng-app dans ma balise html et ng-app="myApp" dans la balise body, comme suit:
<html ng-app>
<body ng-app="myApp"></body>
</html>
J'ai rencontré le même problème et dans mon cas, il se produisait à la suite de ce problème:
Les contrôleurs ont été définis dans un module distinct (appelé "myApp.controllers") et injectés dans le module principal de l'application (appelé "myApp") comme suit:
angular.module('myApp', ['myApp.controllers'])
Un collègue a placé 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') qui a provoqué cette erreur. Je pense que Angular a confondu ces modules de contrôleur. Cependant, le message d'erreur n'était pas très utile pour découvrir ce qui n'allait pas.
Dans mon cas (ayant une page d'aperçu et une page "ajouter") je l'ai eu avec ma configuration de routage comme ci-dessous. C'était donner le message pour le 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 la route when('/', toutes mes routes sont passées à la vue d'ensemble et le contrôleur n'a pas pu être mis en correspondance dans le rendu de la page/add route. C'était déroutant car je DID voyais le modèle add.html mais son contrôleur était introuvable.
Supprimer le '/' - route lorsque le cas a résolu ce problème pour moi.
Si vous êtes dans un sous-module, n'oubliez pas de déclarer le module dans l'application principale .
<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, il est indéfini.
Le deuxième point de med était mon écueil, mais juste pour l'enregistrement, peut-être que ça aide quelqu'un quelque part:
J'ai eu le même problème et juste avant que je devienne 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 me maintenir saine 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 à penser à inclure les fichiers manuellement plus tard… .. Avec le recul, j'aurais vraiment dû le faire lors de la configuration du projet ...
J'ai eu une erreur logique avec LoginController, que j'ai utilisé dans index.html . Principal. J'ai trouvé deux manières de résoudre:
paramètre $ controllerProvider.allowGlobals (), j'ai trouvé ce commentaire dans Angular change-list "Cette option peut être utile pour la migration d'anciennes applications, mais veuillez ne pas l'utiliser dans de nouvelles!" commentaire original sur Angular
app.config (['$ controllerProvider', fonction ($ controllerProvider) { $ controllerProvider.allowGlobals (); }]);
mauvais constructeur de contrôleur d'enregistrement
avant
LoginController.$inject = ['$rootScope', '$scope', '$location'];
à présent
app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);
'app' vient d'app.js
var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);
J'ai eu la même erreur avec une grosse erreur:
appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){
}]);
Tu vois ? J'ai oublié le '' autour de la première $ 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 " Erreur: [ng: areq] L'argument 'TreeEditStepControlsCtrl' n'est pas une fonction, got undefined "
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'
})
Pourrait-il être aussi simple que de placer votre actif entre "" et tout ce dont vous avez besoin cite à 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 avec l'analyse
Il s'avère que c'est le cache du navigateur, en utilisant Chrome ici. Vérifiez simplement que le "Disable cache" sous Inspect (Element) a résolu mon problème.