javascript - otro - El controlador no es una función, no está definido, mientras que define los controladores a nivel mundial
ng controller que es (12)
Estoy escribiendo una aplicación de muestra usando angularjs. Tengo un error mencionado a continuación en el navegador Chrome.
El error es
Error: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined
Que se representa como
El argumento ''ContactController'' no es una función, no está definido
Código
<!DOCTYPE html>
<html ng-app>
<head>
<script src="../angular.min.js"></script>
<script type="text/javascript">
function ContactController($scope) {
$scope.contacts = ["[email protected]", "[email protected]"];
$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>
Acabo de migrar a angular 1.3.3 y encontré que si tenía varios controladores en diferentes archivos cuando la aplicación se anula y perdí los primeros contenedores declarados.
No sé si es una buena práctica, pero tal vez pueda ser útil para otra.
var app = app;
if(!app) {
app = angular.module(''web'', [''ui.bootstrap'']);
}
app.controller(''SearchCtrl'', SearchCtrl);
Con Angular 1.3+ ya no puede usar la declaración de controlador global en el alcance global (Sin registro explícito). module.controller registrar el controlador utilizando la sintaxis module.controller .
Ejemplo:-
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);
Es un cambio de ruptura, pero se puede desactivar para usar globales utilizando allowGlobals .
Ejemplo:-
angular.module(''app'')
.config([''$controllerProvider'', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Aquí está el comentario de la fuente angular: -
- verificar si un controlador con nombre de pila está registrado a través de
$controllerProvider- comprobar si la evaluación de la cadena en el alcance actual devuelve un constructor
- si $ controllerProvider # allowGlobals, verifique la
window[constructor]en el objeto de lawindowglobal (no recomendado)
.....
expression = controllers.hasOwnProperty(constructor)
? controllers[constructor]
: getter(locals.$scope, constructor, true) ||
(globals ? getter($window, constructor, true) : undefined);
Algunos controles adicionales:
Asegúrese de poner el nombre
ng-appdirectivang-appen su elemento raíz angular (por ejemplo: -html) también. Ejemplo: - ng-app = "myApp"Si todo está bien y sigue teniendo problemas, recuerde asegurarse de tener el archivo correcto incluido en los guiones.
No ha definido el mismo módulo dos veces en diferentes lugares, lo que da como resultado que todas las entidades definidas previamente en el mismo módulo se borren, Ejemplo
angular.module(''app'',[]).controller(..y nuevamente en otro lugarangular.module(''app'',[]).service(..(con ambos scripts incluidos, por supuesto) puede hacer que el controlador previamente registrado en laappdel módulo se borre con la segunda recreación del módulo.
Es un gran consejo, excepto que el MISMO error PUEDE ocurrir simplemente por perder el script crítico incluir en su página raíz
ejemplo:
página: index.html
np-app="saleApp"
Desaparecido
<script src="./ordersController.js"></script>
Cuando se le dice a una ruta qué controlador y vista mostrar:
.when(''/orders/:customerId'', {
controller: ''OrdersController'',
templateUrl: ''views/orders.html''
})
¡Tan esencial que el problema del controlador indefinido PUEDE ocurrir en este error accidental de ni siquiera hacer referencia al controlador!
Este error también puede ocurrir cuando tienes un proyecto grande con muchos módulos. Asegúrese de que la aplicación (módulo) utilizada en su archivo angular sea la misma que usa en su plantilla, en este ejemplo " 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
<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>
Obtuve el mismo error al seguir un viejo tutorial con (no lo suficientemente antiguo) AngularJS 1.4.3. Con mucho, la solución más simple es editar la fuente angular.js de
function $ControllerProvider() {
var controllers = {},
globals = false;
a
function $ControllerProvider() {
var controllers = {},
globals = true;
y simplemente siga el tutorial tal como está, y las funciones globales en desuso solo funcionan como controladores.
Obtuve este problema porque envolví un archivo de definición de controlador en un cierre:
(function() {
...stuff...
});
Pero me olvidé de invocar ese cierre para ejecutar ese código de definición y decirle a Javascript que mi controlador existía. Es decir, lo anterior debe ser:
(function() {
...stuff...
})();
Tenga en cuenta el () al final.
Recibí este error porque estaba usando una versión anterior de angular que no era compatible con mi código.
Si está utilizando rutas (alta probabilidad) y su configuración tiene una referencia a un controlador en un módulo que no está declarado como dependencia, la inicialización también puede fallar.
Por ejemplo, suponiendo que hayas configurado ngRoute para tu aplicación, como
angular.module(''yourModule'',[''ngRoute''])
.config(function($routeProvider, $httpProvider) { ... });
Tenga cuidado en el bloque que declara las rutas,
.when(''/resourcePath'', {
templateUrl: ''resource.html'',
controller: ''secondModuleController'' //lives in secondModule
});
Declare secondModule como una dependencia después de que ''ngRoute'' resuelva el problema. Sé que tuve este problema.
Si todo lo demás falla y estás usando Gulp o algo similar ... ¡simplemente vuelve a ejecutarlo!
Perdí 30 minutos cuadruplicando todo cuando todo lo que necesitaba era una patada rápida en los pantalones.
Soy un principiante con Angular e hice el error básico de no incluir el nombre de la aplicación en el elemento raíz angular. Entonces, cambiando el código de
<html data-ng-app>
a
<html data-ng-app="myApp">
trabajó para mi. @PSL, ya ha cubierto esto en su respuesta anterior.
Tuve este error porque no entendía la diferencia entre angular.module(''myApp'', []) y angular.module(''myApp'') .
Esto crea el módulo ''myApp'' y sobrescribe cualquier módulo existente llamado ''myApp'':
angular.module(''myApp'', [])
Esto recupera un módulo existente ''myApp'':
angular.module(''myApp'')
He estado sobrescribiendo mi módulo en otro archivo, utilizando la primera llamada anterior que creó otro módulo en lugar de recuperarlo como esperaba.
Más detalles aquí: https://docs.angularjs.org/guide/module
Tuve este problema cuando accidentalmente redeclare myApp :
var myApp = angular.module(''myApp'',[...]);
myApp.controller(''Controller1'', ...);
var myApp = angular.module(''myApp'',[...]);
myApp.controller(''Controller2'', ...);
Después de redeclarar, el Controller1 deja de funcionar y aumenta el error de OP.