webentwicklung-frage-antwort-db.com.de

Angular UI Bootstrap Modal: [$ injector: unpr] Unbekannter Anbieter: $ uibModalInstanceProvider

Das ist ein bisschen seltsam. Wenn ich dieses Problem online durchsuche, sehe ich viele Seiten mit Google-Ergebnissen und SO= Lösungen ... aber keine scheint zu funktionieren!

Kurz gesagt, ich versuche, AngularUI Bootstrap Modal zu implementieren. Ich erhalte immer wieder die folgende Fehlermeldung:

Fehler: [$ injector: unpr] Unbekannter Anbieter: $ uibModalInstanceProvider <- $ uibModalInstance <- addEntryCtrl

Hier ist mein 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>

Hier ist mein Controller:

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',
    });
  };
}]);

Und zum Schluss ist hier mein Modalcode:

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();
}]);

Lösungen, die ich ausprobiert habe:

  • aktualisiert sowohl Angular Bootstrap (Version: 0.14.3) als auch Angular (v1.4.8)
  • uibModalInstance wurde in modalInstance geändert
  • $ uibModalInstance wurde in modalInstance geändert
  • setze mein addEntryCtrl in meine ModalInstance

Irgendwelche Gedanken? Das treibt mich jetzt seit fast 2 Tagen die Wand hoch.

* EDIT *

Ich sollte zwei Dinge beachten:

1) Wenn ich $ uibModalInstance als Abhängigkeit von addEntry entferne, funktionieren meine HTML-Formular-Übermittlungsschaltflächen einwandfrei und das Formular sieht perfekt aus. Auch die Weiterleitung erfolgt korrekt (bei Übermittlung). Das Problem bleibt bestehen: Das Modal bleibt weiterhin auf dem Bildschirm und es wird der Fehler ausgegeben, dass $ uibModalInstance undefiniert ist. Dies ist sinnvoll, da ich es als Abhängigkeit entfernt habe, aber ich muss offenbar immer noch, dass das Modal bei der Einreichung in der Nähe ist.

2) Ich habe auch fast identischen Code in einem anderen Teil meiner App. Der einzige Unterschied besteht darin, dass es über eine Fabrik funktioniert. Ansonsten ist der Code identisch. Daher bin ich zuversichtlich, dass alle Abhängigkeiten vorhanden und die Versionen korrekt sind. So. Freaking. Seltsam.

Vielen Dank!

20

Antwort gefunden! Nachdem wir uns mit meinem Freund abgehackt hatten, fanden wir die Antwort. Ich wollte es hier posten, nur für den Fall, dass jemand anderes dies liest.

Es stellte sich heraus, dass wir einen ng-controller in unserem modalen Fenster hatten, der sich in einem div-Tag befand, der das gesamte HTML-Formular umhüllte, das sich im modalen befand. Bisher funktionierte dies einwandfrei, wenn sich unser Formular NICHT in einem Modal befand (es hatte eine separate URL), aber aus irgendeinem Grund brach es ab, wenn es sich in einem Modal befand. Der ng-controller hat auf den addEntryCtrl verwiesen. Unmittelbar nach dem Entfernen hat das Formular funktioniert!

47

Das Problem bestand darin, dass Sie beim Öffnen eines Modals und innerhalb einer Vorlage an zwei Stellen einen (oder zwei) Controller angegeben haben. Dies ist nicht erforderlich. Entfernen Sie ng-controller aus einer Vorlage und die Dinge werden wie erwartet funktionieren. Vertrauen Sie mir, es wird funktionieren.

21
napoleonjk

Wenn Sie den Controller in der HTML-Vorlage angeben (mit ng-controller="..."), Wird der $uibModalInstance Nicht aufgelöst. Durch die Angabe des Controllers aus dem Aufruf von $uibModal.open({controller="...", ...}) wird die korrekte Auflösung ermöglicht.

Da Sie nur die Methoden dismiss() und close() benötigen, können Sie diese stattdessen aus $scope (Mit dem Namen $dismiss Und $close) Beziehen , da dies in beiden Fällen zum Instanziieren des Controllers korrekt aufgelöst wird.

var app = angular.module('addEntry', ['ui.bootstrap']);
app.controller('addEntryCtrl', ['$scope', function($scope) {
    $scope.cancel = function() {
        $scope.$dismiss('cancel');
    };

    $scope.$close();
}]);
8
Arjan Einbu

Sie versuchen, auf eine Steuerung zu verweisen, die Teil eines separaten Moduls ist. Damit dies funktioniert, müssen Sie Ihr sekundäres Modul (addEntry) in Ihr Hauptmodul (nav) einfügen:

var app = angular.module('nav', ['ui.bootstrap', 'addEntry']);
3
Andy W

Wenn Sie $ uibModal.open () (siehe unten) verwenden und den Namen controller explizit angeben, sollten Sie die Direktive ng-controller nicht in die Vorlage einfügen. Das verursacht den Fehler. Nein ng-controller im View!

 var uibModalInstance = $uibModal.open({
  animation: true,
  templateUrl: 'addEntry/addEntry.html',
  controller: 'addEntryCtrl',
});
1
icedfluid