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

Я продолжаю получать эту ошибку, поскольку я пытаюсь реализовать bootstrap Modal. Что может быть причиной этого? Я скопировал/вставил все из http://angular-ui.github.io/bootstrap/#/modal здесь.

Ответ 1

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

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

Ошибка выдается в версии 0.5.0, но обновление до 0.6.0 делает доступным $модальное обслуживание. Таким образом, обновите до версии 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
});

Ответ 2

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

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

Ответ 3

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

Как уже упоминалось в Angular руководстве docs (абзац: "Примечание по минимизации" ), вам нужно использовать синтаксис массива, чтобы сделать правильные ссылки поддерживаются правильно для инъекций зависимостей:

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 был функциональным снова.

Ответ 4

Очевидным ответом на ошибку провайдера является отсутствие зависимости при объявлении модуля, как в случае добавления 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 поддерживает вашу текущую версию угловой версии. Если нет, вы можете получить другие ошибки, такие как templateProvider.

Информацию можно найти по ссылке:

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

надеюсь, что это поможет.

Ответ 5

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

Ответ 6

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