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?
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;
}
}
});
}]);
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
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é.
Différentes versions de angular-ui/bootstrap ont différents noms de variables d'injection.
Découvrez angular-ui/exemple de bootstrap.
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.
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