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

Wciąż otrzymuję ten błąd, gdy próbuję zaimplementować okno modalne ładowania początkowego. Co może być tego przyczyną? Skopiowałem / wkleiłem wszystko z http://angular-ui.github.io/bootstrap/#/modal tutaj.

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

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.

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ł.

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.

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

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