Невідомий провайдер: $ modalProvider <- $ модальна помилка з AngularJS


Відповіді:


197

Така помилка виникає, коли ви пишете в залежність від контролера, служби тощо, і ви не створили та не включили цю залежність.

У цьому випадку $modalце не відома служба. Здається, ви не перейшли в ui-bootstrap як залежність при завантаженні кутового. 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
});

1
Я додав ui.bootstrap і все ще отримую ту ж помилку? чи потрібно нам додати директиву про ремінці? як сказав тут stackoverflow.com/questions/18783974 / ...
Ranadheer Reddy

1
@Ranadheer Ваше посилання стосується кутового ременя (це інша бібліотека). Як я вже сказав, ви або використовуєте старішу версію ui-bootstrap, або ви не додали залежність. Інша відповідь також актуальна, що вам потрібно передати ім'я під час мінімізації, але це не здається, що ви зараз маєте справу з мінімізацією.
m59

2
Привіт @ m59. Ви обряд. Я включив стару версію ui-bootstrap. Тепер я включив нову версію, і вона працює чудово. Дуже дякую :-)
Ranadheer Reddy

59
$ Модал тепер повинен читати $ uibModal. Не впевнений, у якій версії він змінився, але я витратив далеко надовго, намагаючись змусити $ модал працювати, перш ніж з’ясувати, що він більше не працює ... Те саме для $ modalInstance, зробіть це $ uibModalInstance
дельп

7
Прикро, вони змінюють її знову і знову. Спочатку діалог $, потім $ модальний, тепер $ uibModal. Просто хворий. Дякуємо за оновлення відповіді. Допомогли мені.
Стівен

54

Через 5 років (це вже тоді не було б проблемою) :

Проміжок імен змінився - ви можете наткнутися на це повідомлення після оновлення до нової версії bootstrap-ui ; вам потрібно звернутися до $uibModal& $uibModalInstance.


Дякую. Я використовував той самий код для двох додатків, але він не працював для останнього. Ця зміна імен може порушити робочу програму !!!
Чапс

2
Дякую !, Станом на версію 1.0.0 $ Modal та $ ModalInstance були застаріли, тут
зміниться

$ modalInstance повністю не працював для мене. $ uibModalInstance зробив
CommandZ

22

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

Як уже згадувалося в посібнику з кутових документів (параграф: "Примітка про мінімізацію"), ви повинні використовувати синтаксис масиву, щоб переконатися, що посилання зберігаються правильно для введення залежності:

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 */ 
}];

З цією зміною мій мінімізований кутовий модульний код вікна інтерфейсу знову став функціональним.


Я не думаю, що він зараз займається мінімізацією, але це варто зазначити, оскільки це також може спричинити ту саму проблему.
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

сподіваюся, що це допомагає.


І ui bootstrap wiki містить список усіх змін префікса.
bjauy

7

після перевірки того, що я все залежності включені, я виправив проблему шляхом перейменування $modalв $uibmodalі $modalInstanceдо$uibModalInstance


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.