Nouveau sur AngularJS et n'arrive pas à trouver le sens de cette erreur. J'ai trouvé quelques autres avec la même erreur, mais il semble que leurs problèmes ne correspondent pas aux miens.
Fournisseur inconnu: $ modalProvider <- $ erreur modale avec AngularJS (semble avoir la dernière version de ui-bootstrap)
Et tous les autres semblent avoir des problèmes de portée avec un modal, mais je n'arrive pas à obtenir le modal pour commencer, alors je pense qu'ils ne sont pas liés. S'il vous plaît dites-moi si je me trompe et comment c'est le cas:
Problème lié à AngularJS avec AngularUI Bootstrap Modal
Problèmes de périmètre avec l'interface utilisateur modulaire angulaire
J'ai attrapé le script ui-bootstrap-tpls-0.6.0.min.js
à partir d'ici: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files et j'ai même essayé d'ajouter le script ui-bootstrap-0.6.0.min.js
en pensant qu'il était peut-être nécessaire . Bien que si je le lisais correctement, il me semble que si je choisissais le script ui-bootstrap-0.6.0.min.js
, je devrais également récupérer tous les modèles ici https://github.com/angular-ui/bootstrap/tree/master/template Ce qui semble être le cas si je n'utilise que ce script basé sur les erreurs:
Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html
J'ai créé un plunker avec tout pour simplifier l'explication de la structure, etc. et le coller dans tout le code ici.
http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview
L'erreur (que vous pouvez voir en testant le code sur Plunker avec la console ouverte) est la suivante:
Error: Unknown provider: $modalInstanceProvider <- $modalInstance
at Error (<anonymous>)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24
at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109
at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310)
at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444)
at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80)
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80
at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136
at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)
Si quelqu'un peut donner un aperçu de ce que je peux faire de mal ici. Cela ne semble pas être un problème de portée. Cela ressemble plus à un problème d’installation ou peut-être à la façon dont je lance manuellement l’application?
Il semble que vous n'injectiez pas le service $modal
en tant que dépendance.
Comment "injecter un service"?
Considérez la function
que vous essayez d'utiliser le service ... vous devriez le déclarer comme ceci:
['$modal', function($modal) {
// $modal has been injected here, you can use it
}]
Je t'ai étudié Plunk maintenant ... il complique à l'extrême des choses simples et révèle quelques malentendus sur les concepts d'AngularJS (contrôleur, scope, etc.)
En outre, il utilisait 3 CSS de Bootstrap - ce qui n’est pas compatible avec AngularJS Bootstrap pour le moment. J'ai changé le lien CSS en Bootstrap 2.
Voyez comment cela peut être beaucoup plus simple et efficace: http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview
Je recommanderais d’étudier ce document attentivement, du début à la fin: http://docs.angularjs.org/guide/concepts
Cette vidéo est également très très bonne, mais elle ne fournit pas une compréhension plus approfondie des concepts: http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs- fondamentaux-en-60-ish-minutes.aspx
En gros, le message d'erreur indiquait que vous essayiez d'injecter un service dans quelque chose (le "ModalController", dans votre cas) - mais ce service n'a pas été trouvé.
"Comment j'essayais d'injecter?" - tu peux demander. La réponse est: chaque paramètre dont vous avez besoin dans une fonction de contrôleur est une "dépendance" à "injecter" - et le service "injecteur" AngularJS effectue cette tâche. C’est ainsi que le paramètre "$ scope" reçoit comme par magie un "scope" - c’est l’injecteur qui travaille en coulisse.
Dans votre ModalController, l'injecteur essayait de satisfaire à la fois les dépendances "$ modalInstance" et "items" (supprimez le paramètre "$ modalInstance" - le message d'erreur devient "itemsProvider not found") ...
Si vous souhaitez recevoir de telles dépendances, via le travail "magique" de l'injecteur, vous devez créer/déclarer des services avec ces noms ... (ou utilisez correctement l'attribut "resolution" comme vous le tentiez). .
... mais ce n'est pas du tout nécessaire dans ce cas. Vous souhaitez simplement accéder aux "éléments" et renvoyer un élément sélectionné. Vous avez également essayé de fermer/rejeter le modal par programmation.
Vous pouvez résoudre les dépendances grâce à l'attribut "résoudre", mais pourquoi compliquer autant ce qui peut être accompli avec simplicité? Utilisez simplement l'attribut "scope" à la place et fournissez la portée au modal - il aura accès à ses propriétés. Le modal ajoute également automatiquement les fonctions "$ close" et "$ licencié" à la portée, de sorte que vous puissiez facilement utiliser ces fonctions.
Vous essayiez de passer des attributs de la portée principale à la portée modale en les injectant en tant que services dans le contrôleur modal! :-) Tu essayais d'injecter la propre instance modale dans son contrôleur !!!
Votre problème principal est donc lié au $injector
- cela vaut la peine d’étudier en quoi consiste ce inject - cela est bien expliqué dans le document documenté ci-dessus.
"Injecter un service" n'est pas aussi simple que "passer une variable à une fonction". Vous y étiez presque à travers l'attribut "résoudre", mais comme je l'ai dit - vraiment inutile pour ce cas simple.
J'ai créé un autre Plunker sans utiliser "scope", et en gardant la "résolution" ... il n'est pas possible d'injecter le "modalInstance" comme nous le faisons avec "items":
'$modalInstance': function() { return modalInstance; }
... parce que c'est toujours undefined
en ce moment ... nous pourrions contourner ce problème en appelant simplement $scope.$close
dans ModalController (et en n'injectant pas le modal) ...
... ou, comme je l'ai fait, l'injecter à travers une fonction ... très fou, mais ça fonctionne:
http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview
... Je ne ferais jamais comme ça ... c'est juste pour apprendre!
Enfin et surtout: en ajoutant ng-controller
dans le fichier de modèle, vous avez besoin du ModalController deux fois ... vous l'avez déjà indiqué dans la configuration modale. Mais grâce à la configuration modale, vous pouvez avoir l'injection de dépendance via le résolveur, tandis que le modèle ne résout pas le problème "résoudre".
Comme indiqué dans les commentaires de Mahery, $modalInstance
est rendu disponible pour injection dans le contrôleur par la mise en œuvre AngularUI Bootstrap. Donc, nous n'avons besoin d'aucun effort pour "résoudre" ou le rendre disponible d'une manière ou d'une autre.
Voici la version mise à jour de Plunker: http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview
En effet, l'erreur se produisait principalement en raison de l'attribut "ng-controller" dans le modèle. Le contrôleur créé de cette manière ne reçoit pas le "traitement AngularUI". Seul le contrôleur spécifié dans le modal options reçoit le "traitement" où $modalInstance
est fourni ...
J'ai adapté Plunker de J. Bruni à Bootstrap3. Vous pouvez le trouver ici:
http://plnkr.co/edit/sgT87KEubgcWkrEfhTRz?p=preview
Veuillez noter que, à partir de ui-bootstrap 0.7.0, le support de bootstrap3 sera natif et que tout problème concernant les modaux (et autres directives, par exemple une barre de progression) devrait être corrigé.
Si vous fournissez le nom du contrôleur lors de l'ouverture et également dans votre modèle, vous obtiendrez la même erreur.
Supprimez le ng-controller de votre template
Bonne codage
J'ai eu la même erreur. En supprimant ng-controller du modèle tout en fournissant votre contrôleur via $ modal, vous pouvez résoudre ce problème.
$modal.open({
templateUrl: 'MyView.html',
controller: 'MyViewController'
});