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.