angularjs - example - Angular Bootstrap Modal: Proveedor desconocido: $ modalInstanceProvider

datepicker angularjs

Question

Estoy tratando de usar la directiva modal Angular Bootstrap ( http://angular-ui.github.io/bootstrap/ ) de la siguiente manera, en mi controlador para abrir el modal:

function customerSearch() {
var modalInstance = $modal.open({
templateUrl: ''app/customer/customers.modal.html'',
controller: ''customers.modal''
});
modalInstance.result.then(function(selectedCustomer) {
console.log(selectedCustomer);
});
}

En el controlador modal:

var controllerId = ''customers.modal'';
angular.module(''app'').controller(controllerId,
[''$modalInstance'', customersModal]);
function customersModal($modalInstance) {
// Modal controller stuff
}

Pero cuando lo hago, aparece el siguiente error:

Unknown provider: $modalInstanceProvider <- $modalInstance

Si $modalInstance , funciona, pero obviamente no tengo referencia al modal en el controlador de llamadas.

Editar

No sé si vale la pena señalarlo, pero estoy usando la sintaxis de Controller As:

<div class="container-fluid" data-ng-controller="customers.modal as vm">

Dependencias de aplicaciones:

var app = angular.module(''app'', [
// Angular modules
''ngAnimate'', // animations
''ngRoute'', // routing
''ngSanitize'', // sanitizes html bindings (ex: sidebar.js)
// Custom modules
''common'', // common functions, logger, spinner
''common.bootstrap'', // bootstrap dialog wrapper functions
// 3rd Party Modules
''ui.bootstrap'', // ui-bootstrap (ex: carousel, pagination, dialog)
''breeze.directives'', // breeze validation directive (zValidate)
]);

Creé un plunker que muestra el problema aquí: http://plnkr.co/edit/u8MSSegOnUQgsA36SMhg?p=preview

Answer 1

El problema era que especificabas un controlador en 2 lugares: al abrir un modal y dentro de una plantilla, esto no es necesario. Elimine ng-controller de una plantilla y todo funcionará como se espera: http://plnkr.co/edit/khySg1gJjqz1Qv4g4cS5?p=preview

Answer 2

prueba esta sintaxis primero

angular.module(''app'').controller(''customers.modal'',
[''$modalInstance'', function($modalInstance){
// Modal controller stuff
}]);

Creo que se estropea si usas la notación de corchetes y declaras el controlador afuera.

$ modalInstance es la instancia modal que creas allí

var modalInstance = $modal.open({
templateUrl: ''app/customer/customers.modal.html'',
controller: ''customers.modal''
});

es realmente el mismo objeto. Se vuelve a inyectar en el controlador pero no es un servicio / fábrica. Entonces no tiene un Proveedor.

Esta es una parte difícil en la lib. No dude en preguntar a los autores originales de ui-bootstrap. Han sido útiles para explicar eso.