javascript - learn - Unbekannter Provider: $ modalProvider<- $ modaler Fehler mit AngularJS




ng-init (4)

Die offensichtliche Antwort für den Provider-Fehler ist die fehlende Abhängigkeit bei der Deklaration eines Moduls wie beim Hinzufügen von ui-bootstrap. Die einzige Sache, die viele von uns nicht berücksichtigen, sind die brechenden Änderungen beim Upgrade auf eine neue Version. Ja, Folgendes sollte funktionieren und den Providerfehler nicht erhöhen:

var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);

Außer wenn wir eine neue Version von ui-boostrap verwenden. Der modale Provider ist jetzt wie folgt definiert:

.provider('$uibModal', function() {
    var $modalProvider = {
      options: {
        animation: true,
        backdrop: true, //can also be false or 'static'
        keyboard: true
      },

Der Rat hier ist, sobald wir sicherstellen, dass die Abhängigkeiten enthalten sind und wir immer noch diesen Fehler erhalten, sollten wir überprüfen, welche Version der JS-Bibliothek wir verwenden. Wir könnten auch eine schnelle Suche durchführen und sehen, ob dieser Anbieter in der Datei vorhanden ist.

In diesem Fall sollte der Modalanbieter nun wie folgt aussehen:

app.factory("$svcMessage", ['$uibModal', svcMessage]);

Noch eine Anmerkung. Stellen Sie sicher, dass Ihre ui-bootstrap-Version Ihre aktuelle angularjs-Version unterstützt. Wenn nicht, erhalten Sie möglicherweise andere Fehler wie templateProvider.

Informationen finden Sie unter folgendem Link:

http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html

ich hoffe es hilft.

Ich erhalte diesen Fehler, während ich versuche, Bootstrap-Modal-Fenster zu implementieren. Was könnte die Ursache dafür sein? Ich habe hier alles von http://angular-ui.github.io/bootstrap/#/modal kopiert / eingefügt.


Diese Art von Fehler tritt auf, wenn Sie in eine Abhängigkeit für einen Controller, einen Dienst usw. schreiben und diese Abhängigkeit nicht erstellt oder eingefügt haben.

In diesem Fall ist $modal kein bekannter Dienst. Es hört sich so an, als hättest du ui-bootstrap nicht als Abhängigkeit beim bootstrapping angular übergeben. angular.module('myModule', ['ui.bootstrap']); Stellen Sie außerdem sicher, dass Sie die neueste Version von ui-bootstrap (0.6.0) verwenden, um sicher zu sein.

Der Fehler wird in Version 0.5.0 ausgelöst, aber das Aktualisieren auf 0.6.0 macht den $ modal-Dienst verfügbar. Aktualisieren Sie daher auf Version 0.6.0 und stellen Sie sicher, dass Sie bei der Registrierung Ihres Moduls ui.boostrap benötigen.

Auf Ihren Kommentar antworten: So injizieren Sie eine Modulabhängigkeit .

<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">

js:

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {

});

Aktualisieren:

Der $modal Service wurde in $uibModal .

Beispiel mit $ uibModal

// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);

// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
    //code here
});

Nur eine zusätzliche Randnotiz für ein Problem, das ich auch heute erlebt habe: Ich hatte einen ähnlichen Fehler "Unbekannter Anbieter: $ aProvider", als ich die Verkleinerung meines Quellcodes angeschaltet habe.

Wie im Angular-Dokumentations-Tutorial (Abschnitt: "Eine Anmerkung zur Verkleinerung") erwähnt , müssen Sie die Array-Syntax verwenden, um sicherzustellen, dass Referenzen für die Abhängigkeitsinjektion korrekt aufbewahrt werden:

var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

Für das http://angular-ui.github.io/bootstrap/#/modal erwähnen Sie, dass Sie dies ersetzen sollten:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
   /* ...example code.. */
}

mit dieser Array-Notation:

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];

Mit dieser Änderung funktionierte mein minimierter modaler Fenstercode Angular UI wieder.


5 Jahre später (das wäre damals nicht das Problem gewesen) :

Der Namespacing hat sich geändert - Sie können nach dem Upgrade auf eine neuere Version von bootstrap-ui über diese Nachricht stolpern; Sie müssen sich auf $uibModal & $uibModalInstance .





modal-dialog