AngularJS-Fehler: 'Argument' FirstCtrl 'ist keine Funktion, wurde undefiniert'

93

Mir ist aufgefallen, dass die gleiche Frage hier einige Male gestellt wurde. Ich habe versucht, sie zu lösen, aber nichts hilft.

Ich verfolge dieses Tutorial mit den Egghead-Videos.

Aber wenn ich zum Abschnitt "Controller und Datenaustausch zwischen Controllern" komme, kann ich ihn nicht zum Laufen bringen.

Wenn ich es mit Chrome ausführe, wird in der Konsole der folgende Fehler angezeigt:

'argument' FirstCtrl 'ist keine Funktion, wurde undefiniert'.

Ich weiß wirklich nicht, was los ist. Der Code ist der gleiche wie im Tutorial.

HTML

<!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>

main.js

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

javascript angularjs

— Pumba
quelle

Hier ist die Lösung in den zweiten Kommentaren - stackoverflow.com/questions/24894870/…

— Kanchan

108

Sie haben 2 unbenannte ng-appAnweisungen in Ihrem HTML.
Verliere den in deinem Div.

Update
Versuchen wir einen anderen Ansatz.
Definieren Sie ein Modul in Ihrer js-Datei und weisen Sie ihm die ng-appDirektive zu. Definieren Sie danach den Controller als ng-Komponente und nicht als einfache Funktion:

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

und der js Teil:

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

Hier ist eine Online-Demo, die genau das tut: http://jsfiddle.net/FssbL/1/

— gion_13
quelle

Vielen Dank für die Antwort, leider bekomme ich immer noch den gleichen Fehler. Also habe ich die ng-app = "" vom div verloren, aber es funktioniert immer noch nicht.

— Pumba

1

Vielen Dank für deine Hilfe! Ich verstehe es nicht mehr, ich habe genau das Gleiche getan, wie Sie es hier und in der Online-Demo gezeigt haben, aber es heißt immer noch, dass 'FirstCtrl' undefiniert ist. Ich werde es von Anfang an noch einmal versuchen, hoffentlich funktioniert es, denn in den nächsten Tutorials bekomme ich das gleiche Problem.

— Pumba

Toll!! Es klappt. Ich habe vergessen, das type-Attribut im Skript-Tag für die js-Datei zu schließen. Und das in Kombination mit Ihrer zweiten Lösung hat funktioniert! Vielen Dank :))

— Pumba

6

Das Demo-Video umschließt den Controller nicht mit dem Modul. Warum funktioniert es für ihn, aber nicht für mich? Egghead.io/lessons/angularjs-controllers

— Demodave

2

@ Demodave, ich habe die gleiche Frage. Ich gehe davon aus, dass die Videos während einer früheren Version von AngularJS aufgenommen wurden und daher die Definition von Controllern möglicherweise weniger streng war (aber das ist nur meine Annahme, ich würde mich freuen, wenn jemand dies bestätigt oder

— ablehnt

93

Ich habe genau die gleiche Fehlermeldung erhalten und in meinem Fall stellte sich heraus, dass ich die Controller-JS-Datei (z. B. first-ctrl.js) nicht in meiner index.html aufgelistet habe

— Mariusz
quelle

1

Was meinst du damit, dass du die Controller-JS-Datei nicht aufgelistet hast? Wollen Sie damit sagen, dass Sie es nicht aufgenommen haben?

— Demodave

@ DavidStone ja - das war damals mein Fall.

— Mariusz

Ein weiterer Noob-Fehler: Rouge-Klammern usw. in der Steuerung können dazu führen, dass derselbe Fehlertyp in der Konsole angezeigt wird.

— user2938649

9

Ich habe gerade dieses Tutorial gemacht und bin der Antwort von @ gion_13 gefolgt. Hat immer noch nicht funktioniert. Es wurde gelöst, indem ich meine machte Name für die ng-App im Index mit dem in meiner js-Datei identisch gemacht wurde. Genau identisch, auch die Zitate. So:

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

und die js:

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

Seltsam, wie identisch die ng-App sein muss, der ng-controller jedoch nicht.

— an1waukoni
quelle

Das hat mich

— vier

7

Sie müssen Ihren Namen angebenng-app und Ihrer App einen Namespace geben. einfach zu benutzen ng-app ist nicht genug .

Anstatt:

<html ng-app>
...

Sie benötigen stattdessen so etwas:

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

Dann wie folgt:

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

— user1429980
quelle

5

Ein weiteres schönes: Module versehentlich neu definieren. Ich habe heute etwas zu eifrig Sachen kopiert / eingefügt und hatte irgendwo eine Moduldefinition, die ich mit meinen Controller-Definitionen überschrieben habe:

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

Dann sollte ich in meinen Definitionen so verweisen:

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

Was ich stattdessen tat , war:

// 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() { /* ... */ });

Beachten Sie die zusätzliche Klammer im Anruf an angular.module.

— Michael Jess
quelle

3

entferne ng-app = "" von

<div ng-app="">

und einfach machen

<div>

— John Smith
quelle

3

Wenn Sie in der Konfiguration Ihrer App Routing verwenden, stellen Sie sicher, dass Sie ng-controller im HTML nicht verwenden. Sie sollten stattdessen ng-view haben. Der Controller wird normalerweise zusammen mit den Ansichten im Routing definiert.

— Marc

1

Auch ich stand vor dem gleichen Problem. Das Problem war jedoch, dass ich vergessen habe, das Modul in der Liste der Module aufzulisten, von denen die ng-App abhängt.

3

Dies sollte ein Kommentar sein, keine Antwort.

— Anthony Perot

1

Ich bin mit diesem Problem konfrontiert und es wurde auf folgende Weise behoben:

Entfernen Sie zuerst die ng-App aus:
```
<html ng-app>
```
füge den Namen der ng-app zu myApp hinzu:
```
<div ng-app="myApp">
```

Fügen Sie diese Codezeile vor der Funktion hinzu:

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

Endgültiges Aussehen des Skripts:

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

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

— Azhar
quelle

1

In meinem Fall stammt diese Nachricht aus der vergessenen Abhängigkeitsinjektion im Hauptmodul

— Thomas Gobert
quelle

1

Dies kann passieren, wenn Sie gulp falsch konfiguriert haben, um Ihren eckigen App-Code mehr als einmal hinzuzufügen. In meinem Fall war dies in index.js und es wurde als Teil des Verzeichnisses der js-Dateien (in gulp globbed) vor und nach meinen Controller-Deklarationen hinzugefügt. Nachdem ich einen Ausschluss für index.js hinzugefügt hatte, der beim zweiten Mal nicht minimiert und injiziert werden sollte, begann meine App zu funktionieren. Ein weiterer Tipp, wenn eine der oben genannten Lösungen Ihr Problem nicht angeht.

— rncrtr
quelle

1

Erstens - Wenn der Modulname nicht definiert ist, können Sie im JS nicht auf das Modul zugreifen und den Controller damit verbinden.

Sie müssen den Modulnamen für das Winkelmodul angeben. Es gibt einen Unterschied bei der Verwendung des Definitionsmoduls. 1. angle.module ("firstModule", []) 2. angle.module ("firstModule")

1 - Eine besteht darin, das neue Modul "firstModule" zu deklarieren, ohne dass in den zweiten Argumenten eine Abhängigkeit hinzugefügt wird. 2 - Hiermit verwenden Sie das "firstModule", das an einer anderen Stelle initialisiert wurde, und Sie versuchen, das initialisierte Modul abzurufen und Änderungen daran vorzunehmen.

— Eshaan Kumar
quelle

0

Ich war mit diesem Problem konfrontiert, konnte dieses Problem jedoch durch Umbenennen des Controllers beheben. Probieren Sie es aus.

ctrlSub.execSummaryDocuments = function(){};

— Amay Kulkarni
quelle

0

Manchmal löst ein Fehler in der Syntax des Codes in der Funktion diesen Fehler aus. Überprüfen Sie Ihre Funktion richtig. In meinem Fall passierte es, als ich versuchte, Json-Felder mit Werten zuzuweisen und einen Doppelpunkt verwendete: um die Zuweisung anstelle des Gleichheitszeichens vorzunehmen = ...

— Amitesh Ranjan
quelle

0

Ich hatte zwei Controller mit demselben Namen in zwei verschiedenen Javascript-Dateien definiert. Wenn Sie diesen Winkel irritieren, kann keine klarere Fehlermeldung angezeigt werden, die auf einen Namespace-Konflikt hinweist.

— thebiggestlebowski
quelle

0

Ich bin mir bei diesem Tutorial nicht sicher, aber ich hatte das gleiche Problem, als ich vergaß, die Datei in den Grunz- / Schluck-Minimierungsprozess aufzunehmen.

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

Hoffentlich hilft das.

— Patrik Bego
quelle

0

Achten Sie auch auf Ihre Briefhülle. Ich habe eine gute Stunde damit verbracht, diesen Fehler zu verfolgen.

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

während ich den Controller benenne

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

Sie sollten alle konsistent benannt werden, in diesem Fall p wdController mit Kleinbuchstaben p vergessen .

— Jeson Martajaya
quelle