Angular UI Bootstrap Modal: [$injector:unprr] Unknown provider: $uibmodalinstancepcrovider
C'est un peu étrange. Lorsque je cherche cette question en ligne je vois de nombreuses pages de résultats de Google et donc des solutions... mais aucune ne semble fonctionner!
en un mot, J'essaie D'implémenter AngularUI Bootstrap Modal. Je reçois l'erreur suivante:
Error: [$injector:unprr] Unknown provider: $uibmodalinstancepcrovider <- $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();
}]);
les Solutions que j'ai essayé:
- mise à jour à la fois Angulaire de Bootstrap (Version: 0.14.3) et Angulaire (v1.4.8)
- a changé uibModalInstance en modalInstance
- changé $uibModalInstance à modalInstance
- mettre mon addEntryCtrl à l'intérieur de mon ModalInstance
des idées? Cela a été la conduite de moi jusqu'à la paroi pendant près de 2 jours maintenant.
* EDIT *
je note deux choses:
1) Quand je supprime $uibModalInstance comme dépendance d'addEntry, les boutons soumettre de mon 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 demeure: le modal reste toujours sur l'écran et une erreur est lancée qui $uibModalInstance n'est pas définie. Cela a du sens puisque je l'ai supprimé en tant que dépendance, mais je dois évidemment encore le modal est prêt sur soumission.
2) de plus, j'ai un code presque identique qui fonctionne dans une autre partie de mon application. La seule différence est qu'il fonctionne par l'intermédiaire d'une usine. Sinon, le code est identique. Ainsi, je suis sûr que mes dépendances sont toutes là et les versions sont correctes. Si. Paniquer. Étrange.
Merci!
5 réponses
Réponse Trouvée! Après avoir piraté mon ami, nous avons découvert la réponse. Je voulais le poster ici au cas où quelqu'un d'autre lit.
il s'avère que nous avions un contrôleur ng-controller dans notre fenêtre modale qui était dans une balise div qui enveloppait la forme html entière qui était dans le modal. Auparavant, cela fonctionnait bien quand notre forme n'était pas dans un modal (il avait une URL séparée) mais pour une raison quelconque il casse quand il est dans un modal. Le contrôleur ng faisait référence au addEntryCtrl. Immédiatement après l'avoir enlevé, le formulaire a fonctionné!
le problème est que vous spécifiez un (ou deux) contrôleur(s) en 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 à partir d'un modèle et tout fonctionne comme prévu.Croyez-moi,il va fonctionner.
il s'avère que si vous spécifiez le controller dans le template html (avec ng-controller="...") il ne résoudra pas le $uibModalInstance. En précisant le contrôleur à partir de l'appel à $uibModal.open({controller="...", ...}) lui permettra de se résoudre correctement.
puisque vous n'avez besoin que du dismiss() et close() méthodes, vous pouvez les obtenir à partir de $scope ($dismiss et $close) à la place, puisque cela résoudra correctement dans les deux cas d'instanciation du controller.
var app = angular.module('addEntry', ['ui.bootstrap']);
app.controller('addEntryCtrl', ['$scope', function($scope) {
$scope.cancel = function() {
$scope.$dismiss('cancel');
};
$scope.$close();
}]);
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']);
comme vous utilisez $ uibModal.open () (voir plus bas) et spécifiez explicitement le controller nom, vous ne devriez pas mettre la directive ng-controller dans le modèle. Que la cause de l'erreur. Pas de ng-controller dans le View!
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'addEntry/addEntry.html',
controller: 'addEntryCtrl',
});