Nieznany dostawca: $ modalProvider <- $ modal błąd z AngularJS

Odpowiedzi:

197

Ten rodzaj błędu występuje, gdy piszesz w zależności dla kontrolera, usługi itp., A nie utworzono ani nie uwzględniono tej zależności.

W tym przypadku $modalnie jest to znana usługa. Wygląda na to, że nie przekazałeś ui-bootstrap jako zależności podczas ładowania początkowego angular. angular.module('myModule', ['ui.bootstrap']);Upewnij się również, że używasz najnowszej wersji ui-bootstrap (0.6.0), na wszelki wypadek.

Błąd jest zgłaszany w wersji 0.5.0, ale aktualizacja do 0.6.0 powoduje, że usługa modalna $ jest dostępna. Tak więc zaktualizuj do wersji 0.6.0 i pamiętaj, aby podczas rejestracji modułu wymagać ui.boostrap.

Odpowiadanie na komentarz: w ten sposób wstrzykujesz zależność od modułu.

<!-- 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) {

});

Aktualizacja:

Nazwa $modalusługi została zmieniona na $uibModal.

Przykład użycia $ 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
});
m59
źródło
1
Dodałem ui.bootstrap i nadal otrzymuję ten sam błąd? czy musimy dodać dyrektywę paska? jak wspomniano tutaj stackoverflow.com/questions/18783974/…
Ranadheer Reddy
1
@Ranadheer Twój link dotyczy paska kątowego (to inna biblioteka). Jak powiedziałem, albo używasz starszej wersji ui-bootstrap, albo nie dodałeś zależności. Inna odpowiedź jest również istotna, że ​​podczas minifikacji musisz podać nazwę, ale nie brzmi to tak, jakbyś miał do czynienia w tej chwili z minifikacją.
m59
2
Cześć @ m59. Jesteś rytuałem. Dołączyłem starą wersję ui-bootstrap. Teraz dołączyłem nową wersję i działa dobrze. Dziękuję bardzo :-)
Ranadheer Reddy
59
$ Modal powinien teraz brzmieć $ uibModal. Nie jestem pewien, w której wersji to się zmieniło, ale spędziłem dużo czasu próbując zmusić $ modal do pracy, zanim dowiedziałem się, że już nie działa ... To samo z $ modalInstance, zrób to $ uibModalInstance
delp
7
Szkoda, że ​​ciągle to zmieniają. Najpierw $ dialog, potem $ modal, teraz $ uibModal. Tylko chory. Dzięki za zaktualizowanie odpowiedzi. Pomogło mi.
Steven
54

5 lat później (wtedy nie byłby to problem) :

Przestrzeń nazw uległa zmianie - możesz natknąć się na ten komunikat po aktualizacji do nowszej wersji bootstrap-ui ; musisz odwołać się do $uibModal& $uibModalInstance.

Brent
źródło
Dzięki. Użyłem tego samego kodu dla 2 aplikacji, ale w ostatniej nie działał. Ta zmiana nazewnictwa może spowodować uszkodzenie działającej aplikacji !!!
Tchaps
2
Dzięki !, Od wersji 1.0.0 $ Modal i $ ModalInstance zostały wycofane,
dziennik
$ modalInstance całkowicie NIE działało dla mnie. $ uibModalInstance zrobił
CommandZ
22

Dodatkowa uwaga dotycząca problemu, którego również dzisiaj doświadczyłem: miałem podobny błąd „Nieznany dostawca: $ aProvider”, gdy włączałem minifikację / uglify kodu źródłowego.

Jak wspomniano w samouczku dokumentacji Angular (akapit: „Uwaga na temat minifikacji”) , musisz użyć składni tablicowej, aby upewnić się, że odwołania są zachowane poprawnie w przypadku wstrzykiwania zależności:

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

W przypadku przykładu Angular UI Bootstrap , o którym wspominasz, powinieneś zastąpić to:

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

z taką notacją tablicową:

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

Po tej zmianie mój zminimalizowany kod okna modalnego Angular UI znów działał.

CREOFF
źródło
Nie sądzę, że ma teraz do czynienia z minifikacją, ale warto to zauważyć, ponieważ może to również spowodować ten sam problem.
m59
Zajrzyj na github.com/btford/ngmin. Możesz go uruchomić przed minifikacją. Następnie możesz kontynuować pisanie shortform i polegać na DI według nazw argumentów, podczas gdy minifikacja nadal działa, ponieważ ngmin rozwija się do wersji tablicowej.
Pascal
11

Oczywistą odpowiedzią na błąd dostawcy jest brak zależności przy deklarowaniu modułu, jak w przypadku dodawania ui-bootstrap. Jedyną rzeczą, której wielu z nas nie bierze pod uwagę, są istotne zmiany podczas aktualizacji do nowej wersji. Tak, poniższe powinny działać i nie powodować błędu dostawcy:

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

Z wyjątkiem sytuacji, gdy używamy nowej wersji ui-boostrap. Dostawca modalny jest teraz zdefiniowany jako:

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

Radzimy tutaj, gdy upewnimy się, że zależności są uwzględnione i nadal otrzymujemy ten błąd, powinniśmy sprawdzić, jakiej wersji biblioteki JS używamy. Moglibyśmy również przeprowadzić szybkie wyszukiwanie i sprawdzić, czy ten dostawca istnieje w pliku.

W takim przypadku dostawca modalny powinien teraz wyglądać następująco:

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

Jeszcze jedna uwaga. Upewnij się, że Twoja wersja ui-bootstrap obsługuje aktualną wersję angularjs. Jeśli nie, możesz otrzymać inne błędy, takie jak templateProvider.

Aby uzyskać informacje, sprawdź ten link:

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

mam nadzieję, że to pomoże.

ozkary
źródło
A wiki bootstrap ui zawiera listę wszystkich zmian prefiksów.
bjauy
7

po sprawdzeniu, czy uwzględniono wszystkie zależności, rozwiązałem problem, zmieniając nazwę $modalna $uibmodali $modalInstancena$uibModalInstance

Jog
źródło
0 
var ModalInstanceCtrl = ['$scope', '$modalInstance',  function ($scope, $modalInstance, items) { 
   /* copy rest of example code here */ 
}];
Walter Rivera
źródło