Неизвестный поставщик: $ 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 */ 
}];

Answer 1

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

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

Answer 3

1

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

Ranadheer Reddy

Answer 4

1

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

m59

Answer 5

2

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

Ranadheer Reddy

Answer 6

59

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

delp

Answer 7

7

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

Стивен

Answer 8

54

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

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

Brent
источник

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

Tchaps

2

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

список

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

CommandZ

Answer 9

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

Tchaps

Answer 10

2

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

список

Answer 11

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

CommandZ

Answer 12

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

Answer 13

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

m59

Answer 14

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

Паскаль

Answer 15

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

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

Answer 16

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

bjauy 08

Answer 17

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

Answer 18

0

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

Уолтер Ривера
источник

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

Ответы:

Обновить: