web-dev-qa-db-fra.com

Fournisseur inconnu: $ uibModalInstanceProvider - Modal d'interface utilisateur de démarrage

J'ai un problème avec l'interface utilisateur modale Bootstrap.

Dans un contrôleur, j'ai ceci:

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {
  $scope.open = function (size,selectedUser) {
  var modalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'myModalContent.html',
    controller:'ModalInstanceCtrl',
    size: size,
    resolve: {
      user: function () {
        return selectedUser;
      }
    }
  });
}]);

Dans un autre, j'ai ceci:

app.controller('ModalInstanceCtrl',['$scope','$uibModalInstance','user', function ($scope, $uibModalInstance, user) {
  $scope.user = user;
  $scope.ok = function () {
    $uibModalInstance.close();
  };
}]);

myModalContent ressemble à ceci:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header"><h1>EDIT</h1></div>
    <div class="modal-body"> 
        {{patient.patient_id}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
    </div>
</script>

J'appelle seulement tableCtrl en HTML et j'appelle open comme suit:

<button class="btn btn-primary" ng-click="open('lg',patient)">Edit</button>

Lorsque je clique sur le bouton Modifier, je reçois cette exception:

Unknown provider: $uibModalInstanceProvider <- $uibModalInstance

J'ai vu ce plunker mais cela ne m'a pas aidé.

Qu'est-ce qui ne va pas?

javascriptangularjsangular-ui-bootstrap
15
Marcinek

J'ai eu le même problème, alors de ma solution, voici comment vous pouvez résoudre votre scénario

app.controller("tableCtrl",['$scope','$http','$uibModal','$log' ,function ($scope, $http,$uibModal,$log) {
  $scope.open = function (size,selectedUser) {
  var uibModalInstance = $uibModal.open({
    animation: $scope.animationsEnabled,
    templateUrl: 'myModalContent.html',
    controller:function($uibModalInstance ,$scope,user){
     $scope.ok = function () {
            $uibModalInstance.dismiss('cancel');
         };

    },
    size: size,
    resolve: {
      user: function () {
        return selectedUser;
      }
    }
  });
}]);
20
GeorgeKach

Le problème identifié est le suivant: mon contrôle était en cours de réinitialisation à partir de la page HTML. Assurez-vous que le contrôleur Modal est initalisé d'un endroit

5
Aashish Patil

J'ai eu exactement le même problème. la mise à jour des bibliothèques angulaire et ui-bootstap a résolu mon problème. Utilisez bower pour mettre à jour ui-bootstrap, il suggère la version de angular qui fonctionne avec. J'espère que j'ai aidé.

3
Mohamad Ghafourian

Différentes versions de angular-ui/bootstrap ont différents noms de variables d'injection.

Découvrez angular-ui/exemple de bootstrap.

1
KaiserKatze

Avoir la fonction de contrôleur, en ligne et à l'intérieur de la définition d'objet uibModalInstance me causait le même problème. 

Après la mise à niveau vers la version 0.14.3, lorsque le code javascript était désactivé, uibModalInstance renvoyait un fournisseur inconnu. La définition du contrôleur à l'aide de 'app.controller' a résolu le problème. 

1
JimmyBob

J'ai constaté que ce problème se produisait lorsque j'ai défini le contrôleur dans le modèle HTML plutôt que dans l'appel modal.open

1
nuander