Errore: l'argomento non è una funzione, non è stato definito

120

Utilizzando AngularJS con Scala Play, ricevo questo errore.

Errore: l'argomento "MainCtrl" non è una funzione, non è stato definito

Sto cercando di creare una tabella composta dai giorni della settimana.

Dai un'occhiata al mio codice. Avevo controllato il nome del controller, ma sembra corretto. Nota: codice utilizzato da questa risposta 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
fonte

15

In html dove hai usato ng-apppuoi cambiarlo inng-app=myApp

— Chandermani

Ho ricevuto lo stesso errore @Chandermani

— Kevin Meredith

Hai provato a rimuovere la chiusura (IIFE) dal codice? Quando ho avuto questo problema, è stato perché avevo un errore PHP nel mio javascript.

— Kevin Beal

1

Puoi scoprire il tuo problema, da questo elenco di controllo: stackoverflow.com/a/26797874/930170

— Sergei Panfilov

Conferma di aver aggiunto MainCtrl.controller.js nel file BundleConfig.cs

— Syed Mohamed

107

Rimuovere il []dal nome ([myApp]) del modulo

angular.module('myApp', [])

E aggiungilo ng-app="myApp"all'html e dovrebbe funzionare.

— Chandermani
fonte

1

Tutto quello che dovevo fare per farlo funzionare era il secondo suggerimento (es. Impostare ng-app = "myApp"). Se ho rimosso [], ho ricevuto un altro errore.

— Jason

15

Avere il secondo parametro []indica che stai creando un nuovo modulo. La rimozione del secondo parametro indica che stai recuperando un modulo esistente. Quindi una possibilità per controllare è se stai chiamando angular.moduledue volte, entrambe le volte includendo il secondo parametro. In tal caso, la ricorrenza successiva sovrascriverà la seconda, nascondendo qualsiasi definizione di controller fino a quel punto.

— Carl G

26

Quando dice di rimuovere il []si riferisce al primo parametro in cui ha l'OP [myApp]invece di myApp. Non sta parlando del secondo parametro.

— Kevin Beal

1

Controlla il nome del tuo controller se stai usando percorsi. Il nome del controller nella definizione del percorso fa distinzione tra maiuscole e minuscole.

— Latin Warrior

78

PRIMO. controlla di aver corretto controllernelle definizioni del percorso, lo stesso dei nomi dei controller che stai definendo

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

nomi di controller diversi in questo esempio porteranno a errori, ma questo esempio è corretto

SECONDO controlla se hai importato il tuo file javascript:

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

— pleerock
fonte

30

Nella mia esperienza, il tuo "secondo" è sempre il problema. Spesso dimentico di importare i miei controller inindex.html

— msanford

Era la seconda anche nel mio caso, ho dimenticato di importare il file JS ...

— Saurabh Misra

26

Ho ricevuto lo stesso messaggio di errore (nel mio caso: "L'argomento 'languageSelectorCtrl' non è una funzione, non è stato definito").

Dopo un noioso confronto con il codice di Angular seed, ho scoperto di aver precedentemente rimosso un riferimento al modulo controller in app.js. (individualo su https://github.com/angular/angular-seed/blob/master/app/js/app.js )

Quindi ho avuto questo:

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

Questo non è riuscito.

E quando ho aggiunto il riferimento mancante:

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

Il messaggio di errore è scomparso e Angular ha potuto instanciare nuovamente i controller.

— Bertrand
fonte

ha avuto lo stesso problema, il mio problema era che ho dimenticato di aggiungere il mio controller al modulo dell'app ... perché questo non avviene automaticamente ??? grazie comunque!

— TheZuck

16

Alcune volte questo errore è il risultato di due ng-app direttive specificate nell'html. Nel mio caso per errore avevo specificato ng-appnel mio htmltag e ng-app="myApp"nel bodytag in questo modo:

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

— Gaurav
fonte

1

Mi è successo quando non ho aggiunto l'iniezione al modulo myApp.

— Ghandhikus

Grazie! Questo ha risolto il mio problema.

— bradden_gross

6

Questo mi ha preso sul serio 4 ORE (comprese infinite ricerche su SO) ma finalmente l'ho trovato: per errore (involontariamente) ho aggiunto uno spazio da qualche parte.

Riesci a individuarlo?

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

Quindi ... 4 ore dopo ho visto che dovrebbe essere:

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

Quasi impossibile da vedere solo ad occhio nudo.

Ciò sottolinea l'importanza vitale del controllo di revisione (git o altro) e dei test di unità / regressione.

— Leo
fonte

1

La mia risposta non è stata uno spazio in più, ma mi ha portato alla mia soluzione. Avevo Controllerinvece controllere basta.

— Grandizer

E ho chiamato il mio file options-moda.controller.js ma stavo cercando options-modal.controller.js DOH!

— theFish

Il mio era perché ho dimenticato di aggiungere .js in BundleConfig. Semplice ma frustrante.

— Ege Bayrak

4

Ho riscontrato lo stesso problema e nel mio caso stava accadendo a causa di questo problema:

Avevo i controller definiti in un modulo separato (chiamato 'myApp.controllers') e iniettati nel modulo principale dell'app (chiamato 'myApp') in questo modo:

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

Un collega ha inserito un altro modulo controller in un file separato ma con lo stesso identico nome del mio (cioè "myApp.controllers") che ha causato questo errore. Penso perché Angular si è confuso tra quei moduli controller. Tuttavia il messaggio di errore non è stato molto utile per scoprire cosa sta andando storto.

— Lilla Eli
fonte

1

Questo dovrebbe essere risolto rimuovendo il secondo parametro nel modulo ... Per ottenere il modulo esistente usando angular.module ('miaApp') senza il secondo parametro. cioè angular.module ('miaApp'). controllore (...)

— Santhosh

3

Nel mio caso (con una pagina panoramica e una pagina "aggiungi") ho ottenuto questo con la mia configurazione di routing come di seguito. Stava dando il messaggio per AddCtrl che non poteva essere iniettato ...

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

A causa del when('/'percorso, tutti i miei percorsi sono passati alla panoramica e non è stato possibile far corrispondere il controller nel rendering della pagina / aggiungi percorso. Questo è stato fonte di confusione perché ho visto il modello add.html ma il suo controller non si trovava da nessuna parte.

La rimozione del percorso "/" quando il caso ha risolto il problema per me.

— EeKay
fonte

Stavo ricevendo anche questo errore e mi stavo strappando i capelli perché stava causando il fallimento delle mie build TFS. Commentando il percorso "/" è stato risolto anche per me. Ora per capire perché!

— Phillip Copley

3

Se ti trovi in un sottomodulo, non dimenticare di dichiarare il modulo nell'app principale. cioè:

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

Se non dichiari subModule1 in mainApp, otterrai un "[ng: areq] Argomento" MyController "non è una funzione, non è stato definito.

— syjust
fonte

2

Il secondo punto di Уmed era la mia trappola, ma solo per la cronaca, forse sta aiutando qualcuno da qualche parte:

Ho avuto lo stesso problema e appena prima di impazzire ho scoperto che avevo dimenticato di includere lo script del controller.

Poiché la mia app è basata su ASP.Net MVC, ho deciso di mantenermi sano inserendo il seguente frammento nel mio App_Start / BundleConfig.cs

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

e in Layout.cshtml

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

Ora non dovrò più pensare di includere i file manualmente. Col senno di poi avrei davvero dovuto farlo durante l'impostazione del progetto ...

— Xceno
fonte

1

Ho ricevuto un errore sano con LoginController, che ho usato in index.html principale. Ho trovato due modi per risolvere:

impostando $ controllerProvider.allowGlobals (), ho trovato quel commento in Angular change-list "questa opzione potrebbe essere utile per migrare vecchie app, ma per favore non usarla in quelle nuove!" commento originale su Angular

app.config (['$ controllerProvider', function ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);
autore sbagliato della registrazione del controller

prima

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

adesso

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

"app" proviene da app.js

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

— Dmitri Algazin
fonte

1

Ho avuto lo stesso errore con un grosso errore:

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

}]);

Vedi ? ho dimenticato il "" intorno al primo $ scope, la sintassi giusta è ovviamente:

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

}]);

Un primo errore che non ho visto immediatamente è stato: " $ scope non è definito ", seguito da " Errore: [ng: areq] L'argomento 'TreeEditStepControlsCtrl' non è una funzione, non è stato definito "

— Elo
fonte

0

Potrebbe essere semplice come racchiudere la tua risorsa tra "" e tutto ciò che necessita di virgolette all'interno con ""?

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

diventa

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

Ciò potrebbe causare alcuni problemi con l'analisi

— Jay Tom
fonte

0

Per risolvere questo problema, ho dovuto scoprire di aver sbagliato a scrivere il nome del controller nella dichiarazione delle rotte angolari:

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

— MadPhysicist
fonte

0

Nel mio caso è stato un semplice errore di battitura in index.html:

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

avrebbe dovuto essere

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

senza l'extra snel nome del controller.

— gorgo
fonte

0

Si scopre che è la cache del browser, usando Chrome qui. Basta controllare "Disabilita cache" in Inspect (Element) ha risolto il mio problema.

— Weihui Guo
fonte

0

Perché questo viene visualizzato in Google quando si cerca di trovare una risposta a: "Errore: l'argomento" non è una funzione, non è stato definito ".

È possibile che tu stia cercando di creare lo stesso modulo due volte.

Angular.module è un luogo globale per la creazione, la registrazione e il recupero dei moduli AngularJS.

Il passaggio di un argomento recupera un angular.Module esistente, mentre il passaggio di più di un argomento crea un nuovo angular.Module

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

Esempio:

angular.module('myApp', []) Viene utilizzato per creare un modulo senza iniettare alcuna dipendenza.

angular.module('myApp') (Senza argomento) viene utilizzato per ottenere un modulo esistente.

— MCollard
fonte

0

Sembra che ci siano molte soluzioni funzionanti che suggeriscono che l'errore abbia molte cause reali .

Nel mio caso non avevo dichiarato il titolare del trattamento in app/index.html:

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

Errore andato.

— Ty Conway
fonte