angularjs - ngbtooltip - Angular UI Bootstrap Modal:[$ injector: unpr] Proveedor desconocido: $ uibModalInstanceProvider

ngbmodule

Question

Esto es un poco extraño. Cuando busco este problema en línea, veo muchas páginas de resultados de Google y SO soluciones ... ¡pero ninguna parece funcionar!

En pocas palabras, estoy tratando de implementar AngularUI Bootstrap Modal. Sigo recibiendo el siguiente error:

Error: [$ injector: unpr] Proveedor desconocido: $ uibModalInstanceProvider <- $ uibModalInstance <- addEntryCtrl

Aquí está mi HTML:

<nav class="navbar navbar-default">
  <div class="container">
    <span class="nav-col" ng-controller="navCtrl" style="text-align:right">
      <a class="btn pill" ng-click="open()" aria-hidden="true">Add New</a>
    </span>
  </div>
</nav>

Aquí está mi controlador:

var app = angular.module(''nav'', [''ui.bootstrap'']);

app.controller(''navCtrl'', [''$scope'', ''$uibModal'', function($scope, $uibModal) {
  $scope.open = function() {
    var uibModalInstance = $uibModal.open({
      animation: true,
      templateUrl: ''addEntry/addEntry.html'',
      controller: ''addEntryCtrl'',
    });
  };
}]);

Y finalmente, aquí está mi código modal:

var app = angular.module(''addEntry'', [''firebase'', ''ui.bootstrap'']);

app.controller(''addEntryCtrl'', [''$scope'', ''$firebaseObject'', ''$state'', ''$uibModalInstance'', function($scope, $firebaseObject, $state, $uibModalInstance) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss(''cancel'');
  };

  $uibModalInstance.close();
}]);

Soluciones que he probado:

• actualizado tanto Angular Bootstrap (Versión: 0.14.3) como Angular (v1.4.8)
• cambiado uibModalInstance a modalInstance
• cambió $ uibModalInstance a modalInstance
• pon mi addEntryCtrl dentro de mi ModalInstance

¿Alguna idea? Esto me ha estado haciendo subir por la pared durante casi 2 días.

* EDITAR *

Debería tener en cuenta dos cosas:

1) cuando elimino $ uibModalInstance como una dependencia de addEntry, los botones de envío de mi formulario HTML funcionan bien y el formulario se ve perfecto. Incluso la redirección se produce correctamente (en el momento de la presentación). El problema continúa: el modal aún permanece en la pantalla y se produce un error que indica que $ uibModalInstance no está definido. Esto tiene sentido ya que lo eliminé como una dependencia, pero obviamente todavía necesito que el modal esté cerca de la presentación.

2) Además, tengo un código casi idéntico que funciona en otra parte de mi aplicación. La única diferencia es que funciona a través de una fábrica. De lo contrario, el código es idéntico. Por lo tanto, estoy seguro de que mis dependencias están ahí y que las versiones son correctas. Asi que. Maldito Extraño.

¡Gracias!

Answer 1

Al usar $ uibModal.open () (ver más abajo) y especificar explícitamente el nombre del controlador , no debe colocar la directiva ng-controller en la plantilla. Eso causa el error. No hay controlador ng en la vista !

 var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: ''addEntry/addEntry.html'',
  controller: ''addEntryCtrl'',
});

Answer 2

El problema fue que estaba especificando un (o doble) controlador (es) en 2 lugares: al abrir un modal y dentro de una plantilla, esto no es necesario. Elimine ng-controller de una plantilla y las cosas funcionarán como se esperaba. Confíe en mí, funcionará.

Answer 3

Está intentando hacer referencia a un controlador que forma parte de un módulo separado. Para que esto funcione, necesita insertar su módulo secundario (addEntry) en su módulo principal (nav):

var app = angular.module(''nav'', [''ui.bootstrap'', ''addEntry'']);

Answer 4

Respuesta encontrada! Después de hackear con mi amigo, descubrimos la respuesta. Quería publicarlo aquí en caso de que alguien más lea esto.

Resulta que teníamos un controlador ng en nuestra ventana modal que estaba en una etiqueta div que envolvía todo el formulario html que estaba en el modal. Anteriormente, esto funcionaba bien cuando nuestro formulario NO estaba en un modal (tenía una URL separada) pero por alguna razón se rompe cuando está en un modal. El controlador ng hacía referencia a addEntryCtrl . Inmediatamente después de retirarlo, la forma funcionó!

Answer 5

Resulta que si especifica el controlador dentro de la plantilla html (con ng-controller="..." ) no resolverá la $uibModalInstance . Especificar el controlador desde la llamada a $uibModal.open({controller="...", ...}) le permitirá resolverlo correctamente.

Ya que solo necesita los métodos de dismiss() y close() , puede obtenerlos desde $scope (denominados $dismiss y $close ), ya que eso se resolverá correctamente de ambas maneras para crear una instancia del controlador.

var app = angular.module(''addEntry'', [''ui.bootstrap'']);
app.controller(''addEntryCtrl'', [''$scope'', function($scope) {
    $scope.cancel = function() {
        $scope.$dismiss(''cancel'');
    };

    $scope.$close();
}]);