web-dev-qa-db-de.com

Modal Window Issue (unbekannter Anbieter: ModalInstanceProvider)

Neu bei AngularJS und kann nicht herausfinden, was dieser Fehler bedeutet. Ich habe ein paar andere mit dem gleichen Fehler gefunden, aber es scheint, dass ihre Probleme nicht mit meinen übereinstimmen.

Unbekannter Anbieter: $ modalProvider <- $ modaler Fehler mit AngularJS (Anscheinend habe ich die neueste ui-bootstrap-Version)

Alle anderen haben offenbar Probleme mit der Modalität des Bereichs, aber ich kann anscheinend nicht die Modalität bekommen, also denke ich, dass diese nicht miteinander verwandt sind. Bitte sag mir, ob ich falsch liege und wie das der Fall ist:

Umfangsproblem in AngularJS mit AngularUI Bootstrap Modal

Scope-Probleme mit Angular UI-Modal

Ich habe mir das ui-bootstrap-tpls-0.6.0.min.js-Skript von hier geholt: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files und ich habe sogar versucht, das ui-bootstrap-0.6.0.min.js-Skript hinzuzufügen, und dachte, es wäre möglicherweise notwendig . Wenn ich es richtig lese, scheint es, wenn ich das ui-bootstrap-0.6.0.min.js-Skript wählte, ich müsste auch alle Vorlagen hier packen https://github.com/angular-ui/bootstrap/tree/master/template Was scheint der Fall zu sein, wenn ich nur dieses Skript basierend auf den Fehlern verwende:

Error: Failed to load template: template/modal/window.html
Error: Failed to load template: template/modal/backdrop.html

Ich habe einen Plunker mit allem erstellt, um die Struktur usw. zu vereinfachen und den Code hier einzufügen.

http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview

Der Fehler (den Sie sehen können, wenn Sie den Code auf dem Plunker bei geöffneter Konsole testen) ist folgender:

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)

Wenn jemand einen Einblick geben kann, was ich hier falsch mache. Es scheint kein Thema zu sein. Eher ein Setup-Problem oder möglicherweise die Art, wie ich die App manuell bootstrapping?

20
edward.louis

Es scheint, dass Sie den $modal-Dienst nicht als Abhängigkeit verwenden.

Wie "einen Dienst injizieren"?

Betrachten Sie die function, die Sie versuchen, den Dienst zu verwenden ... Sie sollten es so deklarieren:

['$modal', function($modal) {
    // $modal has been injected here, you can use it
}]


Bearbeiten:

Ich habe Sie jetzt Plunk studiert ... es ist zu kompliziert, und es werden einige Missverständnisse über AngularJS-Konzepte (Controller, Geltungsbereich usw.) aufgezeigt.

Außerdem wurde Bootstraps 3 CSS verwendet, das derzeit nicht mit AngularJS Bootstrap kompatibel ist. Ich habe die CSS-Verknüpfung in Bootstrap 2 geändert.

Sehen Sie, wie es viel einfacher und effektiver sein kann: http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview

Ich würde empfehlen, dieses Dokument von Anfang bis Ende sorgfältig zu studieren: http://docs.angularjs.org/guide/concepts

Dieses Video ist auch sehr gut, aber es bietet keinen tieferen Einblick in die Konzepte: http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs- Grundlagen-in-60-ish-minutes.aspx


Grundsätzlich wurde in der Fehlermeldung angezeigt, dass Sie versucht haben, einen Dienst in etwas einzuspeisen (in Ihrem Fall "ModalController"). Dieser Dienst wurde jedoch nicht gefunden.

"Wie versuchte ich zu spritzen?" - Sie können fragen. Die Antwort lautet: Jeder Parameter, den Sie in einer Controller-Funktion benötigen, ist eine "Abhängigkeit", die "injiziert" werden soll - und der AngularJS "Injektor" -Dienst führt diese Aufgabe aus. Auf diese Weise erhält der Parameter "$ scope" auf magische Weise einen "Umfang" - der Injektor arbeitet hinter den Kulissen.

In Ihrem ModalController hat der Injektor versucht, die Abhängigkeiten "$ modalInstance" und "items" zu erfüllen (entfernen Sie den Parameter "$ modalInstance" - die Fehlermeldung ändert sich in "itemsProvider nicht gefunden") ...

Wenn Sie durch die "magische" Arbeit des Injektors Abhängigkeiten wie diese erhalten möchten, müssen Sie Dienste mit diesen Namen erstellen/deklarieren ... (oder verwenden Sie das Attribut "Auflösen" so, wie Sie es wollten). .

... das ist aber in diesem Fall überhaupt nicht nötig. Sie möchten nur auf "Artikel" zugreifen und einen ausgewählten Artikel zurücksenden. Sie haben auch versucht, die Modalität programmatisch zu schließen oder zu schließen.

Sie können Abhängigkeiten über das Attribut "Auflösen" auflösen, aber warum so kompliziert, was mit Einfachheit erreicht werden kann? Verwenden Sie stattdessen das Attribut "Gültigkeitsbereich" und geben Sie dem Modal den Gültigkeitsbereich an - es hat Zugriff auf seine Eigenschaften. Das Modal fügt dem Gültigkeitsbereich außerdem automatisch "$ close" - und "$ dismiss" -Funktionen hinzu, sodass Sie diese Funktionen problemlos verwenden können.

Sie haben versucht, Attribute aus dem Hauptbereich an den Modalbereich zu übergeben, indem Sie sie als Services in den Modal Controller einfügen. :-) Sie haben versucht, die eigene modale Instanz in den Controller einzuspeisen !!!

Ihr Hauptproblem bezieht sich also auf den $injector - es lohnt sich zu untersuchen, worum es sich bei inject handelt - es wird in dem dokumentierten Link oben erklärt.

"Injizieren eines Dienstes" ist nicht so einfach wie "Eine Variable an eine Funktion übergeben". Sie waren fast durch das "Auflösen" -Attribut da, aber wie gesagt - wirklich nicht für diesen einfachen Fall erforderlich.

Ich habe einen anderen Plunker erstellt, ohne "scope" zu verwenden, und "auflösen" beibehalten ... Es ist nicht möglich, die "modalInstance" wie bei "items" einzufügen:

'$modalInstance': function() { return modalInstance; }

... weil es in diesem Moment noch undefined ist ... wir könnten das Problem umgehen, indem Sie einfach $scope.$close im ModalController aufrufen (und nicht das Modal einfügen) ...

... oder, wie ich es tat, es durch eine Funktion zu injizieren ... sehr verrückt, aber es funktioniert:

http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview

... das würde ich niemals tun ... es dient nur zu Lernzwecken!


Zu guter Letzt: Durch Hinzufügen von ng-controller in die Vorlagendatei benötigen Sie den ModalController zweimal ... Sie haben ihn bereits in der modalen Konfiguration angegeben. Durch die modale Konfiguration können Sie jedoch die Abhängigkeitseingabe über den Resolver vornehmen lassen - während Sie durch die Vorlage nicht das "Auflösen" -Ding anwenden.

Aktualisieren:

Wie in den Kommentaren von Mahery gezeigt, wird $modalInstance durch die AngularUI Bootstrap-Implementierung für die Injektion in den Controller zur Verfügung gestellt. Wir brauchen also keine Anstrengung, um sie "aufzulösen" oder irgendwie verfügbar zu machen.

Hier ist der aktualisierte Plunker: http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview

In der Tat ist der Fehler hauptsächlich auf das Attribut "ng-controller" in der Vorlage zurückzuführen. Der so erstellte Controller erhält nicht die "AngularUI-Behandlung". Nur der in modal options angegebene Controller erhält die "Behandlung", bei der $modalInstance angegeben wird ...

34
J. Bruni

Ich habe J. Bruni's Plunker für die Arbeit mit Bootstrap3 angepasst. Sie finden es hier:

http://plnkr.co/edit/sgT87KEubgcWkrEfhTRz?p=preview

Bitte beachten Sie, dass die Bootstrap3-Unterstützung mit ui-bootstrap 0.7.0 nativ ist und alle Probleme mit Modalen (und anderen Anweisungen, z. B. Fortschrittsbalken) behoben wurden.

3
Kulbi
  1. Wenn Sie den Controller-Namen während des Öffnens und auch in Ihrer Vorlage angeben, erhalten Sie dieselbe Fehlermeldung.

  2. Entfernen Sie den ng-Controller aus Ihrer Vorlage 

Glückliche Kodierung

3
Ali Adravi

Ich habe den gleichen Fehler bekommen. Sie können dieses Problem beheben, indem Sie ng-controller aus der Vorlage entfernen, während Sie Ihren Controller über $ modal bereitstellen.

$modal.open({
            templateUrl: 'MyView.html',
            controller: 'MyViewController'

        }); 
0
Omal Withanage