Ich erhalte immer wieder diesen Fehler, wenn ich versuche, das 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 .
Ich erhalte immer wieder diesen Fehler, wenn ich versuche, das 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 .
Antworten:
Diese Art von Fehler tritt auf, wenn Sie eine Abhängigkeit für einen Controller, einen Dienst usw. schreiben und diese Abhängigkeit nicht erstellt oder eingeschlossen haben.
In diesem Fall $modalist kein Dienst bekannt. Es hört sich so an, als hätten Sie UI-Bootstrap nicht als Abhängigkeit beim Bootstrapping-Winkel übergeben. angular.module('myModule', ['ui.bootstrap']);Stellen Sie außerdem sicher, dass Sie die neueste Version von ui-bootstrap (0.6.0) verwenden, um die Sicherheit zu gewährleisten.
Der Fehler wird in Version 0.5.0 ausgelöst, aber durch die Aktualisierung auf 0.6.0 wird der Dienst $ modal verfügbar. Aktualisieren Sie also auf Version 0.6.0 und stellen Sie sicher, dass Sie bei der Registrierung Ihres Moduls ui.boostrap benötigen.
Antwort auf Ihren Kommentar: So fügen Sie eine Modulabhängigkeit ein.
<!-- 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) {
});Der $modalDienst wurde in umbenannt $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
});5 Jahre später (dies wäre damals nicht das Problem gewesen) :
Der Namespace hat sich geändert. Möglicherweise stoßen Sie nach dem Upgrade auf eine neuere Version von bootstrap-ui auf diese Meldung . Sie müssen sich auf $uibModal& beziehen $uibModalInstance.
Nur eine zusätzliche Randnotiz für ein Problem, das ich heute auch hatte: Ich hatte einen ähnlichen Fehler "Unbekannter Anbieter: $ aProvider", als ich die Minimierung / Uglifizierung meines Quellcodes aktivierte .
Wie im Tutorial zu Angular-Dokumenten (Absatz: "Ein Hinweis zur Minimierung") erwähnt , müssen Sie die Array-Syntax verwenden, um sicherzustellen, dass die Referenzen für die Abhängigkeitsinjektion korrekt aufbewahrt werden:
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];Für das Angular UI Bootstrap-Beispiel, das Sie erwähnen, sollten Sie dies ersetzen:
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 war mein minimierter modaler Angular UI-Fenstercode wieder funktionsfähig.
Die offensichtliche Antwort auf den Providerfehler ist die fehlende Abhängigkeit beim Deklarieren eines Moduls wie beim Hinzufügen von UI-Bootstrap. Das einzige, was viele von uns nicht berücksichtigen, sind die grundlegenden Änderungen beim Upgrade auf eine neue Version. Ja, Folgendes sollte funktionieren und den Anbieterfehler nicht auslösen:
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 Anbieter ist jetzt definiert als:
.provider('$uibModal', function() {
var $modalProvider = {
options: {
animation: true,
backdrop: true, //can also be false or 'static'
keyboard: true
},Der Ratschlag hier lautet: Sobald wir sichergestellt haben, dass die Abhängigkeiten enthalten sind und dieser Fehler weiterhin auftritt, sollten wir überprüfen, welche Version der JS-Bibliothek wir verwenden. Wir könnten auch eine schnelle Suche durchführen und feststellen, ob dieser Anbieter in der Datei vorhanden ist.
In diesem Fall sollte der modale Anbieter nun wie folgt lauten:
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.
Weitere Informationen finden Sie unter folgendem Link:
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
ich hoffe es hilft.
var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];