Неизвестный поставщик: $ modalProvider <- $ модальная ошибка с AngularJS


Ответы:


197

Этот вид ошибки возникает, когда вы пишете зависимость для контроллера, службы и т. Д., Но не создали или не включили эту зависимость.

В данном случае $modalэто неизвестная услуга. Похоже, вы не передали ui-bootstrap в качестве зависимости при начальной загрузке angular. angular.module('myModule', ['ui.bootstrap']);Кроме того, на всякий случай убедитесь, что вы используете последнюю версию ui-bootstrap (0.6.0).

Ошибка возникает в версии 0.5.0, но обновление до 0.6.0 делает доступной услугу $ modal. Итак, обновитесь до версии 0.6.0 и обязательно потребуйте ui.boostrap при регистрации вашего модуля.

Ответ на ваш комментарий: вот как вы вводите зависимость модуля.

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

});

Обновить:

$modalСлужба была переименована в $uibModal.

Пример использования $ 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
});

1
Я добавил ui.bootstrap, но по-прежнему получаю ту же ошибку? нам нужно добавить директиву strap? как сказано здесь stackoverflow.com/questions/18783974/…
Ranadheer Reddy

1
@Ranadheer Ваша ссылка касается angular-strap (это другая библиотека). Как я уже сказал, вы либо используете старую версию ui-bootstrap, либо не добавляли зависимость. Другой ответ также имеет значение, что вам нужно передать имя при минификации, но это не похоже на то, что вы сейчас имеете дело с минификацией.
m59

2
Привет @ m59. Вы обряд. Я включил старую версию ui-bootstrap. Теперь я включил новую версию, и она работает нормально. Большое спасибо :-)
Ranadheer Reddy

59
Теперь $ modal должен читать $ uibModal. Не уверен, в какой версии он был изменен, но я слишком долго пытался заставить $ modal работать, прежде чем обнаружил, что он больше не работает ... То же самое для $ modalInstance, сделайте его $ uibModalInstance
delp

7
Жалко, что они меняют это снова и снова. Сначала $ dialog, затем $ modal, теперь $ uibModal. Просто больно. Спасибо за обновление ответа. Помог мне.
Стивен

54

5 лет спустя (в то время это не было проблемой) :

Изменилось пространство имен - вы можете наткнуться на это сообщение после обновления до более новой версии bootstrap-ui ; вам нужно обратиться к $uibModal& $uibModalInstance.


Спасибо. Я использовал один и тот же код для двух приложений, но в последнем он не работал. Это изменение названия может нарушить работу приложения !!!
Tchaps

2
Спасибо !, Начиная с версии 1.0.0 $ Modal и $ ModalInstance устарели,
список

$ modalInstance полностью НЕ работал для меня. $ uibModalInstance сделал
CommandZ

22

Просто дополнительное примечание к проблеме, с которой я также столкнулся сегодня: у меня была аналогичная ошибка «Неизвестный поставщик: $ aProvider», когда я включил минификацию / удаление моего исходного кода.

Как упоминалось в руководстве по документации по Angular (параграф: «Замечание по минификации»), вы должны использовать синтаксис массива, чтобы убедиться, что ссылки сохраняются правильно для внедрения зависимостей:

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

В примере Angular UI Bootstrap, который вы упомянули, вам следует заменить это:

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

с этой нотацией массива:

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

С этим изменением мой минимизированный код модального окна Angular UI снова заработал.


Я не думаю, что он сейчас занимается минификацией, но это стоит отметить, так как это также может вызвать ту же проблему.
m59

Загляните на github.com/btford/ngmin. Вы можете запустить его до минификации. Затем вы можете продолжать писать краткую форму и зависеть от DI по именам аргументов, в то время как минификация все еще работает, поскольку ngmin действительно расширяется до версии массива.
Паскаль

11

Очевидный ответ на ошибку провайдера - отсутствие зависимости при объявлении модуля, как в случае добавления ui-bootstrap. Единственное, на что многие из нас не обращают внимания, - это критические изменения при обновлении до нового выпуска. Да, следующее должно работать и не вызывать ошибку провайдера:

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

За исключением случаев, когда мы используем новую версию ui-boostrap. Модальный провайдер теперь определяется как:

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

Совет: как только мы убедимся, что зависимости включены, и мы все еще получим эту ошибку, мы должны проверить, какую версию библиотеки JS мы используем. Мы также можем выполнить быстрый поиск и посмотреть, существует ли этот провайдер в файле.

В этом случае модальный провайдер теперь должен быть следующим:

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

Еще одно замечание. Убедитесь, что ваша версия ui-bootstrap поддерживает текущую версию angularjs. В противном случае вы можете получить другие ошибки, такие как templateProvider.

Для получения информации перейдите по этой ссылке:

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

Надеюсь, поможет.


И пользовательский интерфейс самонастройки вики содержит список всех изменений префиксов.
bjauy 08

7

Убедившись, что все зависимости включены, я исправил проблему, переименовав $modalв $uibmodalи $modalInstanceв$uibModalInstance


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.