Esto es un poco extraño. Cuando busco este tema en línea veo muchas páginas de resultados de Google y por LO soluciones… pero ninguno parece funcionar!

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

Error: [$inyector:unpr] Desconocido proveedor de: $uibModalInstanceProvider <- $uibModalInstance <- addEntryCtrl

Aquí está mi código 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 modal código:

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 intentado:

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

Los pensamientos? Esta ha sido la que me condujo hasta la pared de casi 2 días ahora.

* EDITAR *

Debo señalar dos cosas:

1) cuando me quite $uibModalInstance como una dependencia de addEntry, mi formulario HTML presentar los botones funcionan bien y el formulario se ve perfecto. Incluso la redirección se produce correctamente (en la presentación). El problema sigue siendo: el modal todavía permanece en la pantalla y se genera un error que $uibModalInstance es indefinido. Esto tiene sentido, ya que se retira como una dependencia, pero que, obviamente, todavía necesita el modal es cercano a la presentación.

2) También, tengo casi idéntica a la del código de trabajo en otra parte de mi aplicación. La única diferencia que hay 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 mi dependencias son todo lo que hay y versiones son correctas. Así. Los estribos. Extraño.

Gracias!

  • Son los bloques de código dentro de un IIFE? De lo contrario, está sobrescribiendo el app variable (puede resultar molesta). También, el segundo bloque de código contiene un cerradas de la función y de la matriz. Probablemente sea un error tipográfico o simplemente se omite la última parte, pero usted debe tratar de hacer que el código en su pregunta completa
  • Además, he visto que este mismo error de antes (stackoverflow.com/q/33600137/283366), pero esa pregunta no obtiene ningún respuestas útiles. FYI, $uibModalInstance funciona bien en mis aplicaciones
  • Cualquier posibilidad de que usted está usando la interfaz de usuario de bootstrap 0.14.2? $uibModalInstance fue añadido en 0.14.3 ~ github.com/angular-ui/bootstrap/issues/4778
  • gracias por la respuesta! 1) he editado mi código para incluir los corchetes de cierre, 2) he incluido la versión de bootstrap y angular….. todavía no hay dados 🙁

5 Comentarios

  1. 47

    Respuesta Encontrada! Después de cortar lejos con mi amigo, hemos descubierto la respuesta. Quería publicar aquí por si alguien más lee esto.

    Resulta que teníamos un ng-controller en nuestra ventana modal que estaba en una etiqueta div que envuelve todo el formulario html que estaba en el modal. Anteriormente, este funcionaba bien cuando nuestra forma de que NO estaba en un modal (había una URL distinta), pero por alguna razón se rompe cuando está en un modal. El ng-controller se hace referencia a la addEntryCtrl. Inmediatamente después de sacarla, la forma de trabajo!

    • Muchas gracias, yo había estado buscando la respuesta correcta a este problema, este debe ser escrito en algún lugar en la interfaz de usuario.bootstrap documentación.
    • Gracias por tomarse el tiempo para publicar una actualización!
    • Gracias por la respuesta
    • Gracias por la actualización. Me ayudó en el camino para encontrar una solución alternativa, lo que me permite utilizar ng-controller de la vista. Ver mi respuesta para más detalles!
    • Exactamente mi problema. Hasta la votación de su respuesta. Gracias.
    • Un millón de gracias!!!

  2. 21

    El problema era que tenía la especificación de una (o doble) controlador(s) en 2 lugares – cuando la apertura de un modal y dentro de una plantilla – esto no es necesario. Quitar ng-controller a partir de una plantilla y que las cosas funcionan como se esperaba.Confía en mí,va a trabajar.

    • Esta es la mejor respuesta.
    • Este es exactamente el problema que estoy enfrentando. Desde sólo quiero usar la directiva, por lo que no tengo mi propio controlador. Puse el controlador de la directiva en la etiqueta, que causó el problema. La eliminación de la ng-controller atributo resuelto perfectamente. Gracias!
    • Esta respuesta es totalmente equivocado – Comprobar este Violín: jsfiddle.net/s8bLdg2d o esta plnkr plnkr.co/editar/FElOoLllZmT7kaGVtz5V?p=vista previa
    • Esta es la mejor respuesta. Keep it up.
  3. 8

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

    Ya que sólo necesita la dismiss() y close() métodos, se puede conseguir a partir de $scope (nombre $dismiss y $close), ya que se resuelve correctamente en ambos sentidos de instanciar el controlador.

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

    Usted está tratando de hacer referencia a un controlador que es parte de un módulo independiente. En orden para que esto funcione, es necesario inyectar su módulo secundario (addEntry) en su módulo principal (nav):

    var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);
    • Un buen consejo, pero que ciertamente no es la fuente de OP error
    • un gran consejo. lo he añadido. no resolver mi problema, sin embargo 🙁
    • ¿te olvides de incluir el script(angular de la interfaz de usuario de Bootstrap) archivo?
    • si te refieres a la de ang interfaz de usuario de bootstrap de dependencia… sí, lo hice a través de la enramada. 😉
    • el código parece estar bien cuando se puso en plunkr: plnkr.co/editar/fZKP82RmP0q3L0mXW6WV?p=vista previa. así que me estoy sospechando que es un problema de referencia.
    • cuando te dicen que es un problema de referencia, puede usted ser más específico? he buscado en google, pero no dice…. más detalles sería genial @NPToita gracias!

  5. 1

    Como usar $uibModal.open() (ver menos) y especificar explícitamente el controlador de nombre, usted no debe poner la directiva ng-controller en la plantilla.
    Que causa el error. No ng-controller en el Ver !

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

Dejar respuesta

Please enter your comment!
Please enter your name here