Il controller non è una funzione, non è stato definito, definendo i controller a livello globale

123

Sto scrivendo un'applicazione di esempio utilizzando angularjs. ho ricevuto un errore menzionato di seguito nel browser Chrome.

L'errore è

Errore: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

Che viene visualizzato come

L'argomento "ContactController" non è una funzione, non è stato definito

Codice

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>

— yokks
fonte

172

Con Angular 1.3+ non è più possibile utilizzare la dichiarazione del controller globale sull'ambito globale (senza registrazione esplicita). Dovresti registrare il controller usando la module.controllersintassi.

Esempio:-

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

o

function ContactController($scope) {
    $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

    $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

È un cambiamento radicale ma può essere disattivato per utilizzare le globali utilizzandoallowGlobals .

Esempio:-

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

Ecco il commento dalla fonte Angular: -

controllare se un controller con il nome dato è registrato tramite $controllerProvider

controlla se la valutazione della stringa sull'ambito corrente restituisce un costruttore

se $ controllerProvider # allowGlobals, controlla window[constructor]l' windowoggetto globale (non consigliato)

 .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

Alcuni controlli aggiuntivi: -

Assicurati di mettere l'appname nella ng-appdirettiva sul tuo elemento radice angolare (ad esempio: - html). Esempio: - ng-app = "myApp"
Se tutto va bene e il problema persiste, ricordati di assicurarti di avere il file corretto incluso negli script.
Non hai definito lo stesso modulo due volte in luoghi diversi, il che comporta la cancellazione di qualsiasi entità definita in precedenza sullo stesso modulo, Esempio angular.module('app',[]).controller(..e di nuovo in un altro luogo angular.module('app',[]).service(..(con entrambi gli script inclusi ovviamente) può causare il controller precedentemente registrato sul modulo appda cancellare con la seconda ricreazione del modulo.

— PSL
fonte

Come verificarlo come suggerito? controlla se un controller con il nome specificato è registrato tramite $ controllerProvider

— geckob

app.register.controller ('TheController', TheController); ha fatto il trucco per me.

— morph85

33

Ho avuto questo problema perché avevo avvolto un file di definizione del controller in una chiusura:

(function() {
   ...stuff...
});

Ma avevo dimenticato di invocare effettivamente quella chiusura per eseguire quel codice di definizione e dire effettivamente a Javascript che il mio controller esisteva. Cioè, quanto sopra deve essere:

(function() {
   ...stuff...
})();

Notare la () alla fine.

— rogueleaderr
fonte

1

+1 È interessante notare che a volte visual studio rimuove automaticamente l'invocazione. Ho copiato un file js esistente contenente questo codice; l'originale aveva l'invocazione, il file copiato no.

— papergodzilla

16

Sono un principiante con Angular e ho fatto l'errore di base di non includere il nome dell'app nell'elemento radice angolare. Quindi, cambiando il codice da

<html data-ng-app>

per

<html data-ng-app="myApp">

ha funzionato per me. @PSL, ha già parlato di questo nella sua risposta sopra.

— Prakash Tiwari
fonte

8

Ho riscontrato questo errore perché non ho capito la differenza tra angular.module('myApp', [])eangular.module('myApp') .

Questo crea il modulo "miaApp" e sovrascrive qualsiasi modulo esistente denominato "miaApp":

angular.module('myApp', [])

Questo recupera un modulo esistente "myApp":

angular.module('myApp')

Avevo sovrascritto il mio modulo in un altro file, usando la prima chiamata sopra che ha creato un altro modulo invece di recuperare come mi aspettavo.

Maggiori dettagli qui: https://docs.angularjs.org/guide/module

— Jake Stewart
fonte

1

Nel mio caso, ho aggiunto il modulo, ho aggiunto il controller, ma ho dimenticato di aggiungere il modulo nell'elenco dei moduli per l'app. `angular.module (" app ", [HEREYOURMODULE] ...`

— Thomas

3

Ho appena migrato ad angular 1.3.3 e ho scoperto che se avessi più controller in file diversi quando l'app viene ignorata e ho perso i primi contenitori dichiarati.

Non so se sia una buona pratica, ma forse può essere utile per un'altra.

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);

— Franzi
fonte

2

Ho riscontrato questo problema quando ho dichiarato di nuovo accidentalmente myApp:

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

Dopo la ridichiarazione, Controller1smette di funzionare e genera l'errore OP.

— Daniel Flippance
fonte

2

Ottimo consiglio, tranne che lo STESSO errore PU verificarsi semplicemente mancando l'inclusione dello script critico nella pagina principale

esempio:

pagina: index.html

   np-app="saleApp"

Mancante

<script src="./ordersController.js"></script>

Quando a una rotta viene detto quale controller e vista servire:

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

Così essenziale che il problema del controller non definito PU verificarsi in questo errore accidentale di non fare nemmeno riferimento al controller!

— Tom Stickel
fonte

0

Questo errore potrebbe verificarsi anche quando hai un progetto di grandi dimensioni con molti moduli. Assicurati che l'app (modulo) utilizzata nel tuo file angolare sia la stessa che usi nel tuo modello, in questo esempio " thisApp ".

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

index.html

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>

— Patrick
fonte

0

Se tutto il resto fallisce e stai usando Gulp o qualcosa di simile ... rieseguilo!

Ho sprecato 30 minuti quadruplicando tutto quando tutto ciò di cui aveva bisogno era un rapido calcio nei pantaloni.

— sigmapi13
fonte

0

Se stai utilizzando percorsi (alta probabilità) e la tua configurazione ha un riferimento a un controller in un modulo che non è dichiarato come dipendenza, anche l'inizializzazione potrebbe fallire.

Ad esempio, supponendo che tu abbia configurato ngRoute per la tua app, come

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

Attento al blocco che dichiara i percorsi,

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

Dichiarare secondModulecome dipendenza dopo "ngRoute" dovrebbe risolvere il problema. So di aver avuto questo problema.

— H.Rabiee
fonte

0

Ho ricevuto questo errore perché stavo usando una versione precedente di angular che non era compatibile con il mio codice.

— Dean Sha
fonte

0

Questi errori si sono verificati, nel mio caso, preceduti da errori di sintassi nella funzione list.find (); metodo "find" di un elenco non riconosciuto da IE11, quindi deve essere sostituito dal metodo Filter, che funziona sia per IE11 che per chrome. fare riferimento a https://github.com/flrs/visavail/issues/19

— HydTechie
fonte

0

Questo errore, nel mio caso, è preceduto da un errore di sintassi nel metodo find di un elenco in IE11. quindi sostituito il metodo di ricerca con il metodo di filtro come suggerito https://github.com/flrs/visavail/issues/19

quindi sopra il controller non definito errore risolto.

— HydTechie
fonte

-3

Ho ricevuto lo stesso errore mentre seguivo un vecchio tutorial con (non abbastanza vecchio) AngularJS 1.4.3. La soluzione di gran lunga più semplice è modificare il sorgente angular.js da

function $ControllerProvider() {
  var controllers = {},
      globals = false;

per

function $ControllerProvider() {
  var controllers = {},
      globals = true;

e segui semplicemente il tutorial così com'è, e le funzioni globali deprecate funzionano solo come controller.

— MKaama
fonte

Questa è una cattiva pratica. Come accennato nella risposta di PSL, puoi farlo in questo modo:

angular.module('app')     .config(['$controllerProvider', function($controllerProvider) {         $controllerProvider.allowGlobals();     }]);

— gm2008

-1. Questo è anche un ottimo modo per assicurarti di (a) sovrascriverlo non appena esegui l'aggiornamento, il che genererà rapporti inutili (e errati) che "l'aggiornamento da 1.4.3 a 1.4.4 ha danneggiato la mia applicazione!" e / o (b) non aggiorni la tua app perché "è difficile".

— Phillip Copley