Fehler: Argument ist keine Funktion, wurde undefiniert

120

Bei Verwendung von AngularJS mit Scala Play wird dieser Fehler angezeigt.

Fehler: Argument 'MainCtrl' ist keine Funktion, wurde undefiniert

Ich versuche eine Tabelle zu erstellen, die aus den Wochentagen besteht.

Bitte schauen Sie sich meinen Code an. Ich hatte den Namen des Controllers überprüft, aber das scheint richtig zu sein. Hinweis: Der aus dieser SO- Antwort verwendete Code

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
quelle
15
In HTML, wo Sie verwendet haben, ng-appkönnen Sie es ändern inng-app=myApp
Chandermani
Habe den gleichen Fehler @Chandermani
Kevin Meredith
Haben Sie versucht, den Verschluss (IIFE) aus dem Code zu entfernen? Als ich dieses Problem hatte, war es, weil ich einen PHP-Fehler in meinem Javascript hatte.
Kevin Beal
1
Sie können Ihr Problem anhand dieser Checkliste herausfinden
Sergei
Bestätigen Sie, ob Sie MainCtrl.controller.js hinzugefügt haben, das in der Datei BundleConfig.cs hinzugefügt wurde
Syed Mohamed

Antworten:

107

Entfernen Sie das []aus dem Namen ([myApp]) des Moduls

angular.module('myApp', [])

Und ng-app="myApp"zum HTML hinzufügen und es sollte funktionieren.

Chandermani
quelle
1
Alles, was ich tun musste, um es zum Laufen zu bringen, war der zweite Vorschlag (dh ng-app = "myApp" setzen). Wenn ich das [] entfernt habe, habe ich einen weiteren Fehler erhalten.
Jason
15
Der zweite Parameter []zeigt an, dass Sie ein neues Modul erstellen. Das Entfernen des zweiten Parameters zeigt an, dass Sie ein vorhandenes Modul abrufen. Eine Möglichkeit zu überprüfen ist also, ob Sie angular.modulezweimal aufrufen , beide Male einschließlich des zweiten Parameters. In diesem Fall überschreibt das spätere Auftreten das zweite und verbirgt alle Definitionen von Controllern bis zu diesem Punkt.
Carl G
26
Wenn er sagt, dass er das entfernen soll [], bezieht er sich auf den ersten Parameter, den das OP [myApp]anstelle von hat myApp. Er spricht nicht über den zweiten Parameter.
Kevin Beal
1
Überprüfen Sie den Namen Ihres Controllers, wenn Sie Routen verwenden. Der Controller-Name in der Routendefinition unterscheidet zwischen Groß- und Kleinschreibung.
Latin Warrior
78

ZUERST. Überprüfen Sie, ob die Routendefinitionen korrekt sind controller, genau wie die Controller-Namen, die Sie definieren

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

Unterschiedliche Controller-Namen in diesem Beispiel führen zu Fehlern, aber dieses Beispiel ist korrekt

ZWEITE Prüfung, ob Sie Ihre Javascript-Datei importiert haben:

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

Pleerock
quelle
30
Nach meiner Erfahrung ist Ihre "Sekunde" immer das Problem. Ich vergesse oft, meine Controller inindex.html
msanford
Es war auch das zweite in meinem Fall, ich habe vergessen, die JS-Datei zu importieren ...
Saurabh Misra
26

Ich hatte die gleiche Fehlermeldung (in meinem Fall: "Argument 'languageSelectorCtrl' ist keine Funktion, wurde undefiniert").

Nach einem langwierigen Vergleich mit dem Code von Angular Seed stellte ich fest, dass ich zuvor einen Verweis auf das Controller-Modul in app.js entfernt hatte. (Finde es unter https://github.com/angular/angular-seed/blob/master/app/js/app.js )

Also hatte ich folgendes:

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

Dies ist fehlgeschlagen.

Und als ich die fehlende Referenz hinzufügte:

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

Die Fehlermeldung verschwand und Angular konnte die Controller erneut instanziieren.

bertrand
quelle
hatte das gleiche Problem, mein Problem war, dass ich vergessen habe, meinen Controller zum App-Modul hinzuzufügen ... warum passiert das nicht automatisch ??? trotzdem danke!
TheZuck
16

Manchmal ist dieser Fehler auf zwei ng-app im HTML angegebene Anweisungen zurückzuführen. In meinem Fall hatte ich versehentlich ng-appin meinem htmlTag und ng-app="myApp"in dem bodyTag Folgendes angegeben:

<html ng-app>
  <body ng-app="myApp"></body>
</html>
Gaurav
quelle
1
Es ist mir passiert, als ich die Injektion nicht zum myApp-Modul hinzugefügt habe.
Ghandhikus
Danke dir! Dies hat mein Problem behoben.
bradden_gross
6

Das hat mich 4 STUNDEN ernst genommen (einschließlich endloser Suchanfragen auf SO), aber schließlich habe ich es gefunden: Aus Versehen (ungewollt) habe ich irgendwo ein Leerzeichen hinzugefügt.

Kannst du es erkennen?

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

Also ... 4 Stunden später sah ich, dass es sein sollte:

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

Mit bloßem Auge kaum zu sehen.

Dies unterstreicht die entscheidende Bedeutung der Revisionskontrolle (Git oder was auch immer) und der Einheits- / Regressionstests.

Löwe
quelle
1
Meine Antwort war kein zusätzlicher Platz, aber sie führte mich zu meiner Lösung. Ich hatte Controllerstatt controllerund das war alles was es brauchte.
Grandizer
Und ich habe meine Datei options-moda.controller.js benannt, aber nach options-modal.controller.js DOH gesucht!
TheFish
Meins war, weil ich vergessen habe, .js in BundleConfig hinzuzufügen. Einfach aber frustrierend.
Ege Bayrak
4

Ich bin auf dasselbe Problem gestoßen, und in meinem Fall ist es aufgrund dieses Problems aufgetreten:

Ich hatte die Controller in einem separaten Modul ("myApp.controllers") definiert und wie folgt in das Haupt-App-Modul ("myApp") eingefügt:

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

Ein Kollege hat ein anderes Controller-Modul in eine separate Datei verschoben, jedoch mit genau demselben Namen wie ich (dh 'myApp.controllers'), was diesen Fehler verursacht hat. Ich denke, weil Angular zwischen diesen Controller-Modulen verwechselt wurde. Die Fehlermeldung war jedoch nicht sehr hilfreich, um festzustellen, was falsch läuft.

Lilla Eli
quelle
1
Dies sollte behoben werden, indem der zweite Parameter im Modul entfernt wird ... Um das vorhandene Modul mithilfe von angle.module ('myApp') ohne den zweiten Parameter abzurufen. dh angle.module ('myApp'). contoller (...)
Santhosh
3

In meinem Fall (mit einer Übersichtsseite und einer "Hinzufügen" -Seite) habe ich dies mit meinem Routing-Setup wie unten erhalten. Es gab die Nachricht für die AddCtrl, die nicht injiziert werden konnte ...

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

Aufgrund der when('/'Route gingen alle meine Routen in die Übersicht und der Controller konnte beim Rendern der / add route page nicht abgeglichen werden. Dies war verwirrend, weil ich die Vorlage add.html nicht gesehen habe, aber der Controller nirgends zu finden war.

Das Entfernen der '/' - Route, wenn der Fall dieses Problem für mich behoben hat.

EeKay
quelle
Ich erhielt auch diesen Fehler und riss mir die Haare aus, weil dadurch meine TFS-Builds fehlschlugen. Das Auskommentieren der '/' Route hat es auch für mich behoben. Nun, um herauszufinden, warum!
Phillip Copley
3

Wenn Sie sich in einem Submodul befinden, vergessen Sie nicht, das Modul in der Haupt-App zu deklarieren. dh:

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

Wenn Sie subModule1 in mainApp nicht deklarieren, erhalten Sie ein "[ng: areq] Argument" MyController "ist keine Funktion, wurde undefiniert.

syjust
quelle
2

Der zweite Punkt von Уmed war meine Falle, aber nur zur Veranschaulichung, vielleicht hilft es jemandem irgendwo:

Ich hatte das gleiche Problem und kurz bevor ich verrückt wurde, stellte ich fest, dass ich vergessen hatte, mein Controller-Skript einzuschließen.

Da meine App auf ASP.Net MVC basiert, habe ich mich entschlossen, gesund zu bleiben, indem ich das folgende Snippet in meine App_Start / BundleConfig.cs eingefügt habe

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

und in Layout.cshtml

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

Jetzt muss ich nie wieder daran denken, die Dateien manuell einzuschließen. Im Nachhinein hätte ich das wirklich tun sollen, als ich das Projekt eingerichtet habe ...

Xceno
quelle
1

Ich habe einen vernünftigen Fehler mit LoginController bekommen, den ich in main index.html verwendet habe. Ich habe zwei Möglichkeiten zur Lösung gefunden:

  1. Beim Setzen von $ controllerProvider.allowGlobals () habe ich diesen Kommentar in der Angular- Änderungsliste gefunden "Diese Option ist möglicherweise nützlich für die Migration alter Apps, aber bitte verwenden Sie sie nicht in neuen!" Originalkommentar zu Angular

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

  2. falscher Konstruktor der Registriersteuerung

Vor

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

jetzt

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

'app' kommt von app.js.

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

Ich hatte den gleichen Fehler mit einem großen Fehler:

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

}]);

Siehst du? Ich habe das '' um den ersten $ Bereich vergessen, die richtige Syntax ist natürlich:

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

}]);

Ein erster Fehler, den ich nicht sofort sah, war: " $ scope is not defined ", gefolgt von " Error: [ng: areq] Argument 'TreeEditStepControlsCtrl' ist keine Funktion, wurde undefiniert "

Elo
quelle
0

Könnte es so einfach sein, Ihr Asset in "" einzuschließen und was auch immer Zitate auf der Innenseite mit '' benötigt?

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

wird

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

Dies könnte zu Problemen beim Parsen führen

Jay Tom
quelle
0

Um dieses Problem zu beheben, musste ich feststellen, dass ich den Namen des Controllers in der Deklaration der Winkelrouten falsch geschrieben habe:

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

In meinem Fall war es ein einfacher Tippfehler in index.html:

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

das hätte sein sollen

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

ohne das Extra sim Namen des Controllers.

Eddy
quelle
0

Es stellt sich heraus, dass es sich um den Cache des Browsers handelt, der hier Chrome verwendet. Überprüfen Sie einfach den "Cache deaktivieren" unter Inspizieren (Element), um mein Problem zu lösen.

Weihui Guo
quelle
0

Da dies in Google angezeigt wird, wenn versucht wird, eine Antwort auf folgende Frage zu finden: "Fehler: Argument '' ist keine Funktion, wurde undefiniert".

Möglicherweise versuchen Sie zweimal, dasselbe Modul zu erstellen.

Das angle.module ist ein globaler Ort zum Erstellen, Registrieren und Abrufen von AngularJS-Modulen.

Durch Übergeben eines Arguments wird ein vorhandenes Winkelmodul abgerufen, während durch Übergeben von mehr als einem Argument ein neues Winkelmodul erstellt wird

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

Beispiel:

angular.module('myApp', []) Wird verwendet, um ein Modul zu erstellen, ohne Abhängigkeiten einzufügen.

angular.module('myApp') (Ohne Argument) wird verwendet, um ein vorhandenes Modul abzurufen.

MCollard
quelle
0

Es scheint viele funktionierende Lösungen zu geben, die darauf hindeuten, dass der Fehler viele tatsächliche Ursachen hat .

In meinem Fall hatte ich den Controller nicht deklariert in app/index.html:

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

Fehler weg.

Ty Conway
quelle