Il controller non ha una funzione, è indefinito, mentre definisce i controller a livello globale

Sto scrivendo un’applicazione di esempio usando angularjs. ho un errore menzionato di seguito sul 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 rende come

L’argomento ‘ContactController’ non è una funzione, non è stato definito

Codice

     function ContactController($scope) { $scope.contacts = ["[email protected]", "[email protected]"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; }    

modules sample

Email:

Contacts

  • {{contact}}

Con Angular 1.3+ non è più ansible utilizzare la dichiarazione del controllore globale nell’ambito globale (senza registrazione esplicita). Dovresti registrare il controller usando la syntax module.controller .

Esempio:-

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

o

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

È un cambio di rottura, ma può essere distriggersto per usare i globals usando allowGlobals .

Esempio:-

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

Ecco il commento di Angular fonte: –

  • controlla se un controller con un nome specificato è registrato tramite $controllerProvider
  • controllare se la valutazione della stringa sull’ambito corrente restituisce un costruttore
  • se $ controllerProvider # allowGlobals, controlla la window[constructor] sull’object della window 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 inserire l’appname nella direttiva ng-app sull’elemento radice angular (ad esempio: – html ). Esempio: – ng-app = “myApp”

  • Se tutto va bene e il problema si sta ancora verificando, ricordarsi di avere il file giusto incluso negli script.

  • Non hai definito lo stesso modulo due volte in luoghi diversi, il che comporta la cancellazione di qualsiasi quadro definita precedentemente sullo stesso modulo, Esempio angular.module('app',[]).controller(.. e di nuovo in un altro punto angular.module('app',[]).service(.. (con entrambi gli script inclusi, naturalmente) può causare la cancellazione del controller precedentemente registrato app del modulo con la seconda ricreazione del modulo.

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

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

Ma mi ero dimenticato di invocare effettivamente quella chiusura per eseguire quel codice di definizione e in realtà dire a Javascript che il mio controller esisteva. Vale a dire, quanto sopra deve essere:

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

Nota il () alla fine.

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

  

a

  

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

Ho avuto questo errore perché non ho compreso la differenza tra angular.module('myApp', []) e angular.module('myApp') .

Questo crea il modulo ‘myApp’ e sovrascrive qualsiasi modulo esistente denominato ‘myApp’:

angular.module('myApp', [])

Questo recupera un modulo esistente “myApp”:

angular.module('myApp')

Ho sovrascritto il mio modulo in un altro file, utilizzando la prima chiamata sopra la quale ho creato un altro modulo invece di recuperare come mi aspettavo.

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

Mi limito a migrare a 1.3.4 angular e ho scoperto che se avessi avuto più controller in file diversi quando l’app è stata ignorata e ho perso i primi contenitori dichiarati.

Non so se è una buona pratica, ma forse può essere utile per un altro.

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

Ho avuto questo problema quando ho accidentalmente myApp :

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

Dopo la ridichiarazione, Controller1 smette di funzionare e solleva l’errore OP.

Davvero un ottimo consiglio, tranne il fatto che l’errore SAME può verificarsi semplicemente manchiando l’inclusione degli script critici nella tua pagina principale

esempio:

pagina: index.html

  np-app="saleApp" 

Mancante

  

Quando viene indicato un percorso a quale controller e vista servire:

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

Così essenziale il problema del controller indefinito può verificarsi in questo errore accidentale di non fare nemmeno riferimento al controller!

Questo errore può verificarsi anche quando si dispone di un progetto di grandi dimensioni con molti moduli. Assicurati che l’app (modulo) utilizzata nel tuo file angular 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 = ["[email protected]", "[email protected]"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; }]); 

index.html

    

Fai attenzione nel blocco che dichiara i percorsi,

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

Dichiarare secondModule come dipendenza dopo che ‘ngRoute’ dovrebbe risolvere il problema. So di avere avuto questo problema.

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

Questi errori si sono verificati, nel mio caso, preceduti da errori di syntax nella funzione list.find (); ‘trova’ il metodo di una lista non riconosciuta da IE11, quindi deve sostituire con il metodo Filter, che funziona sia per IE11 che per Chrome. consultare https://github.com/flrs/visavail/issues/19

Questo errore, nel mio caso, è preceduto dall’errore di syntax nel metodo find di un elenco in IE11. quindi sostituito metodo di ricerca per metodo di filtro come suggerito https://github.com/flrs/visavail/issues/19

quindi sopra il controller non definito errore risolto.

Se tutto il resto fallisce e stai usando Gulp o qualcosa di simile … fallo di nuovo!

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

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

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

a

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

e basta seguire il tutorial così com’è, e le funzioni globali deprecate funzionano come controller.