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

Question 1

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

Question 2

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

В данном случае $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
});

Question 3

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

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

Question 4

Просто дополнительное примечание к проблеме, с которой я также столкнулся сегодня: у меня была аналогичная ошибка «Неизвестный поставщик: $ 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 снова заработал.

Question 5

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

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

Question 6

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

Question 7

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