Javascript Girl
  1. Javascript Girl
  3. AngularJS error: 'argument' FirstCtrl 'n'est pas une fonction, n'a pas défini'
Intereting Posts
AngularJS: problème de portée dans le rappel de $ http Comment afficher les données JSON brutes sur une page HTML Effectuez une étiquette comme bouton d'entrée 400 mauvaise demande sur la mise à jour de l'API de Youtube en utilisant AngularJS Activer / désactiver le zoom sur safari iPhone avec Javascript? Comment obtenir une classe d'objets JavaScript? Comment convertir la matrice dd / mm / aaa en l'objet Date JavaScript? Uncaught ReferenceError: django n'est pas défini Comment Feed.ly détermine-t-il la progression de la charge iFrame? Javascript sélectionnez les marqueurs Google pour toutes les possibilités de conditions de la case à cocher La logique pour le bouton Suivant pour le questionnaire? Prévenir les fuites de mémoire AJAX Que signifie le troisième paramètre (faux) dans document.addEventListener ("deviceready", OnDeviceReady, false); Obtenir le code correct pour les touches du clavier (clavier numérique) Flux de données dans l'application de réaction

AngularJS error: 'argument' FirstCtrl 'n'est pas une fonction, n'a pas défini'

J'ai remarqué que la même question a été posée quelques fois ici, j'ai essayé de le résoudre, mais rien ne l'aide.

Je suis en train de suivre ce tutoriel avec les vidéos egghead.

Mais lorsque j'arrive à la section Contrôleurs et partage de données entre les contrôleurs, je ne peux pas le faire fonctionner.

Quand je l'exécute avec Chrome, je reçois cette erreur dans la console:

'Argument' FirstCtrl 'n'est pas une fonction, n'a pas défini'.

Je ne sais vraiment pas ce qui ne va pas. Le code est le même dans le didacticiel.

Voici le code pour le HTML que j'ai: 

<!DOCTYPE html> <html ng-app> <head> <title>AngularJS Tutorials: Controllers</title> <link rel="stylesheet" href="mystyle.css"> <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script> </head> <body> <div ng-app=""> <div ng-controller="FirstCtrl"> <h1> {{data.message + " world"}}</h1> <div class="{{data.message}}"> Wrap me in a foundation component </div> </div> </div> <script type="text/javascript" src="main.js"></script> </body> </html>

Et voici le code pour le main.js: 

 function FirstCtrl($scope){ $scope.data = {message: "Hello"}; }

Vous avez 2 directives ng-app sans nom dans votre html.
Perdez celui dans votre div.

Mettre à jour
Essayons une approche différente.
Définissez un module dans votre fichier js et attribuez ng-app directive ng-app . Ensuite, définissez le contrôleur comme un composant ng, pas comme une simple fonction: 

 <div ng-app="myAppName"> <!-- or what's the root node of your angular app -->

Et la partie js: 

 angular.module('myAppName', []) .controller('FirstCtrl', function($scope) { $scope.data = {message: 'Hello'}; });

Voici une démonstration en ligne qui fait exactement cela: http://jsfiddle.net/FssbL/1/

J'ai exactement le même message d'erreur et dans mon cas, il s'est avéré que je n'ai pas répertorié le fichier JS du contrôleur (p. Ex. First-ctrl.js) dans mon index.html

Je viens de faire ce tutoriel et j'ai suivi la réponse @ gion_13. Encore ne fonctionnait pas. Je l'ai résolu en faisant mon nom ng-app dans l'index identique à celui dans mon fichier js. Exactement identique, même les guillemets. Alors: 

 <div ng-app="myapp"> <div ng-controller="FirstCtrl">

Et les js: 

  angular.module("myapp", []) .controller('FirstCtrl',function($scope) { $scope.data= {message:"hello"}; });

Astucieux, comment l' application ng doit être identique mais le ng-controller ne l'est pas.

Vous devez nommer votre ng-app , en donnant à votre application un espace de noms; Simplement utiliser ng-app ne suffit pas .

Au lieu de: 

 <html ng-app> ...

Vous aurez besoin de quelque chose comme ça: 

 <html ng-app="app"> ...

Alors, ainsi: 

 var app = angular.module("app", []).controller("ActionsController", function($scope){});

Un autre avantage: la redéfinition accidentelle de modules. Je copier / coller des trucs un peu trop avidement plus tôt aujourd'hui et j'ai fini par avoir une définition de module quelque part, que j'ai dépassé avec mes définitions de contrôleur: 

 // controllers.js - dependencies in one place, perfectly fine angular.module('my.controllers', [/* dependencies */]);

Ensuite, dans mes définitions, je devais le référencer ainsi: 

 // SomeCtrl.js - grab the module, add the controller angular.module('my.controllers') .controller('SomeCtrl', function() { /* ... */ });

Ce que j'ai fait à la place était: 

 // Do not try this at home! // SomeCtrl.js angular.module('my.controllers', []) // <-- redefined module, no harm done yet .controller('SomeCtrl', function() { /* ... */ }); // SomeOtherCtrl.js angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible .controller('SomeOtherCtrl', function() { /* ... */ });

Notez le support supplémentaire dans l'appel à angular.module .

Supprimer ng-app = "" de 

 <div ng-app="">

Et simplement le faire 

 <div>

Moi aussi j'ai le même problème. Mais le problème était que j'ai oublié d'énumérer le module dans la liste des modules dont dépend l'application ng.

J'ai été confronté à ce problème et il a été corrigé de la manière suivante:

  1. Supprimez d'abord ng-app de: 

     <html ng-app>

  2. Ajoutez le nom de ng-app à myApp: 

     <div ng-app="myApp">

  3. Ajoutez cette ligne de code avant la fonction: 

     angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

Aspect final du script: 

 angular.module('myApp', []).controller('FirstCtrl',FirstCtrl); function FirstCtrl($scope){ $scope.data = {message: "Hello"}; }

Dans mon cas, ce message provient de l'injection de dépendance oubliée dans le module principal

Cela peut se produire si vous avez configuré mal pour ajouter votre code d'application angulaire plus d'une fois. Dans mon cas, c'était dans index.js, et il l'ajoutait dans le répertoire des fichiers js (globbed in gulp) avant et après les déclarations de mon contrôleur. Une fois que j'ai ajouté une exclusion pour index.js pour ne pas être minifié et injecté la deuxième fois, mon application a commencé à fonctionner. Un autre conseil si l'une des solutions ci-dessus ne répond pas à votre problème.

J'ai fait face à ce problème, mais j'ai pu corriger ce problème en renommant le contrôleur, essayez-le. 

 ctrlSub.execSummaryDocuments = function(){};

Quelque chose de mal dans la syntaxe du code à l'intérieur de la fonction jette cette erreur. Vérifiez correctement votre fonction. Dans mon cas, il est arrivé quand j'essayais d'attribuer des champs Json avec des valeurs et j'utilisais deux points: pour effectuer l'attribution au lieu d'un signe égal = …

J'ai eu deux contrôleurs avec le même nom défini dans deux fichiers javascript différents. Irritant que l'angulaire ne puisse pas donner un message d'erreur plus clair indiquant un conflit d'espace de noms.

Je ne suis pas sûr de ce tutoriel, mais j'ai eu le même problème lorsque j'ai oublié d'inclure le fichier dans le processus de minimisation / gulp minimisation. 

 grunt.initConfig({ uglify: { my_target: { files: { 'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js'] } } } });

J'espère que cela pourra aider.

Regardez également votre enveloppe de lettre. J'ai passé une bonne heure à poursuivre ce bogue. 

 <section id="forgotpwd" ng-controller="ForgotPwdController">

Alors que je nomme le contrôleur 

 angular .module('app') .controller('ForgotpwdController', ForgotpwdController);

Ils devraient tous être constamment nommés, dans ce cas, Forgot p wdController avec minuscules p.