web-dev-qa-db-fra.com

Angular UI Bootstrap Modal: [$ injector: impr] Fournisseur inconnu: $ uibModalInstanceProvider

C'est un peu étrange. Lorsque je recherche ce problème en ligne, je vois de nombreuses pages de résultats Google et SO solutions ... mais aucune ne semble fonctionner!

En un mot, j'essaie d'implémenter AngularUI Bootstrap Modal. Je reçois toujours l'erreur suivante:

Erreur: [$ injector: unf] Fournisseur inconnu: $ uibModalInstanceProvider <- $ uibModalInstance <- addEntryCtrl

Voici mon 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>

Voici mon contrôleur:

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',
    });
  };
}]);

Et enfin, voici mon code 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();
}]);

Solutions que j'ai essayées:

  • mis à jour à la fois Angular Bootstrap (Version: 0.14.3) et Angular (v1.4.8)
  • changé uibModalInstance en modalInstance
  • changé $ uibModalInstance en modalInstance
  • mettre mon addEntryCtrl dans mon ModalInstance

Des pensées? Cela me fait monter le mur depuis près de 2 jours maintenant.

* MODIFIER *

Je dois noter deux choses:

1) lorsque je supprime $ uibModalInstance comme dépendance d'AddEntry, mes boutons d'envoi de formulaire HTML fonctionnent très bien et le formulaire semble parfait. Même la redirection se produit correctement (lors de la soumission). Le problème persiste: le modal reste toujours à l'écran et une erreur est générée que $ uibModalInstance n'est pas définie. Cela a du sens puisque je l'ai supprimé en tant que dépendance mais j'ai évidemment besoin que le modal soit proche lors de la soumission.

2) De plus, j'ai du code presque identique qui fonctionne dans une autre partie de mon application. La seule différence est que cela fonctionne via une usine. Sinon, le code est identique. Ainsi, je suis convaincu que mes dépendances sont toutes là et que les versions sont correctes. Alors. Freaking. Étrange.

Merci!

angularjsangular-ui-bootstrapangular-bootstrapangular-ui-modal
20
Benjamin Hoffman

Réponse trouvée! Après avoir piraté avec mon ami, nous avons découvert la réponse. Je voulais le poster ici juste au cas où quelqu'un d'autre le lirait.

Il s'avère que nous avions un ng-controller dans notre fenêtre modale qui était dans une balise div qui enveloppait le formulaire html entier qui était dans le modal. Auparavant, cela fonctionnait bien lorsque notre formulaire n'était PAS dans un modal (il avait une URL distincte) mais pour une raison quelconque, il se casse lorsqu'il est dans un modal. Le ng-controller faisait référence au addEntryCtrl. Immédiatement après l'avoir retiré, le formulaire a fonctionné!

47
Benjamin Hoffman

Le problème était que vous spécifiiez un (ou double) contrôleur (s) à 2 endroits - lors de l'ouverture d'un modal et à l'intérieur d'un modèle - ce n'est pas nécessaire. Supprimer ng-controller d'un modèle et les choses fonctionneront comme prévu. Faites-moi confiance, cela fonctionnera.

21
napoleonjk

Il s'avère que si vous spécifiez le contrôleur dans le modèle html (avec ng-controller="..."), Il ne résoudra pas le $uibModalInstance. La spécification du contrôleur de l'appel à $uibModal.open({controller="...", ...}) lui permettra de se résoudre correctement.

Comme vous n'avez besoin que des méthodes dismiss() et close(), vous pouvez les obtenir à partir de $scope (Nommé $dismiss Et $close) À la place , car cela résoudra correctement dans les deux manières d'instancier le contrôleur.

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

    $scope.$close();
}]);
8
Arjan Einbu

Vous essayez de référencer un contrôleur qui fait partie d'un module séparé. Pour que cela fonctionne, vous devez injecter votre module secondaire (addEntry) dans votre module principal (nav):

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

Comme vous utilisez $ uibModal.open () (voir plus bas) et spécifiez explicitement le nom contrôleur, vous ne devez pas mettre la directive ng-controller dans le modèle. Cela provoque l'erreur. Non ng-controller dans le Voir!

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