javascript - open - modal bootstrap angularjs
Proveedor desconocido: $ modalProvider<- $ error modal con AngularJS (6)
Después de verificar que tenía todas las dependencias incluidas, arreglé el problema cambiando el nombre $modal a $uibmodal y $modalInstance a $uibModalInstance
Sigo recibiendo este error porque estoy tratando de implementar la ventana modal de bootstrap. ¿Cuál podría ser la causa? Copié / pegué todo desde http://angular-ui.github.io/bootstrap/#/modal aquí.
Este tipo de error ocurre cuando escribe una dependencia para un controlador, servicio, etc., y no ha creado ni incluido esa dependencia.
En este caso, $modal no es un servicio conocido. Parece que no pasaste en ui-bootstrap como una dependencia cuando bootstrapping angular. angular.module(''myModule'', [''ui.bootstrap'']); Además, asegúrese de estar utilizando la última versión de ui-bootstrap (0.6.0), solo para estar seguro.
El error se produce en la versión 0.5.0, pero la actualización a 0.6.0 hace que el servicio $ modal esté disponible. Por lo tanto, actualice a la versión 0.6.0 y asegúrese de requerir ui.boostrap al registrar su módulo.
Respondiendo a su comentario: Así es como se inyecta una dependencia de módulo.
<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">
js:
// create the module, pass in modules it depends on
var app = angular.module(''myApp'', [''ui.bootstrap'']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller(''myCtrl'', function($scope, $uibModal) {
});
Actualizar:
El servicio $modal ha cambiado de nombre a $uibModal .
Ejemplo usando $ uibModal
// create the module, pass in modules it depends on
var app = angular.module(''myApp'', [''ui.bootstrap'']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller(''myCtrl'', function($scope, $uibModal) {
//code here
});
La respuesta obvia para el error del proveedor es la dependencia faltante al declarar un módulo como en el caso de agregar ui-bootstrap. Lo único que muchos de nosotros no tenemos en cuenta son los cambios bruscos al actualizar a una nueva versión. Sí, lo siguiente debería funcionar y no aumentar el error del proveedor:
var app = angular.module(''app'', [''ui.router'', ''ngRoute'', ''ui.bootstrap'']);
app.factory("$svcMessage", [''$modal'', svcMessage]);
Excepto cuando estamos usando una nueva versión de ui-boostrap. El proveedor modal ahora se define como:
.provider(''$uibModal'', function() {
var $modalProvider = {
options: {
animation: true,
backdrop: true, //can also be false or ''static''
keyboard: true
},
El consejo aquí es una vez que nos aseguremos de que las dependencias estén incluidas y todavía recibamos este error, debemos verificar qué versión de la biblioteca JS estamos usando. También podríamos hacer una búsqueda rápida y ver si ese proveedor existe en el archivo.
En este caso, el proveedor modal ahora debería ser el siguiente:
app.factory("$svcMessage", [''$uibModal'', svcMessage]);
Una nota más Asegúrese de que su versión de ui-bootstrap sea compatible con su versión angularjs actual. Si no, puede obtener otros errores como templateProvider.
Para información, consulte este enlace:
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
Espero eso ayude.
Solo una nota adicional para un problema que también experimenté hoy: tuve un error similar "Proveedor desconocido: $ aProvider" cuando activé minification / uglify de mi código fuente.
Como se menciona en el tutorial de documentos angulares (párrafo: "Una nota sobre la minificación") , debe usar la sintaxis del arreglo para asegurarse de que las referencias se mantengan correctamente para la inyección de la dependencia:
var PhoneListCtrl = [''$scope'', ''$http'', function($scope, $http) { /* constructor body */ }];
Para el http://angular-ui.github.io/bootstrap/#/modal , mencione que debe reemplazar esto:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
/* ...example code.. */
}
con esta notación de matriz:
var ModalInstanceCtrl = [''$scope'', ''$modalInstance'', ''items'', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];
Con ese cambio, mi código de ventana modal de Interfaz de Usuario Angular reducido volvió a funcionar.
5 años después (este no hubiera sido el problema en ese momento) :
El espacio de nombres ha cambiado: puede tropezar con este mensaje después de actualizar a una versión más nueva de bootstrap-ui ; necesita consultar $uibModal y $uibModalInstance .
var ModalInstanceCtrl = [''$scope'', ''$modalInstance'', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];