web-dev-qa-db-fra.com

Problème lié à la fenêtre modale (fournisseur inconnu: ModalInstanceProvider)

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?

angularjsangular-uiangular-ui-bootstrap
20
edward.louis

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
}]

Modifier:

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".

Mettre à jour:

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 ...

34
J. Bruni

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é.

3
Kulbi

  1. Si vous fournissez le nom du contrôleur lors de l'ouverture et également dans votre modèle, vous obtiendrez la même erreur.

  2. Supprimez le ng-controller de votre template 

Bonne codage

3
Ali Adravi

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'

        });
0
Omal Withanage