Penyedia tidak dikenal: $ modalProvider <- $ modal error dengan AngularJS

Jawaban:

197

Jenis kesalahan ini terjadi saat Anda menulis dalam ketergantungan untuk pengontrol, layanan, dll, dan Anda belum membuat atau menyertakan ketergantungan itu.

Dalam hal ini, $modalbukanlah layanan yang dikenal. Sepertinya Anda tidak meneruskan ui-bootstrap sebagai dependensi saat bootstrap bersudut. angular.module('myModule', ['ui.bootstrap']);Selain itu, pastikan Anda menggunakan versi terbaru ui-bootstrap (0.6.0), agar aman.

Kesalahan muncul dalam versi 0.5.0, tetapi memperbarui ke 0.6.0 membuat layanan $ modal tersedia. Jadi, perbarui ke versi 0.6.0 dan pastikan membutuhkan ui.boostrap saat mendaftarkan modul Anda.

Membalas komentar Anda: Ini adalah cara Anda memasukkan ketergantungan modul.

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

});

Memperbarui:

The $modallayanan telah diubah namanya menjadi $uibModal.

Contoh menggunakan $ 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
});
m59
sumber
1
Saya telah menambahkan ui.bootstrap dan masih mendapatkan kesalahan yang sama? apakah kita perlu menambahkan petunjuk tali? seperti yang dikatakan di sini stackoverflow.com/questions/18783974/…
Ranadheer Reddy
1
@Ranadheer Tautan Anda terkait dengan tali bersudut (itu perpustakaan yang berbeda). Seperti yang saya katakan, Anda menggunakan versi ui-bootstrap yang lebih lama atau Anda tidak menambahkan ketergantungan. Jawaban lain juga relevan, bahwa Anda harus meneruskan nama saat mengecil, tetapi sepertinya Anda tidak berurusan dengan minifikasi saat ini.
m59
2
Hai @ m59. Anda adalah ritual. Saya menyertakan versi lama ui-bootstrap. Sekarang saya menyertakan versi baru dan berfungsi dengan baik. Terima kasih banyak :-)
Ranadheer Reddy
59
$ Modal sekarang harus membaca $ uibModal. Tidak yakin di versi mana itu berubah, tetapi saya menghabiskan waktu lama untuk mencoba mendapatkan $ modal untuk bekerja sebelum mengetahuinya tidak lagi berfungsi ... Sama untuk $ modalInstance, jadikan $ uibModalInstance
delp
7
Sayang sekali mereka mengubahnya lagi dan lagi. Dialog $ pertama, lalu $ modal, sekarang $ uibModal. Sakit saja. Terima kasih telah memperbarui jawabannya. Membantuku.
Steven
54

5 tahun kemudian (ini tidak akan menjadi masalah pada saat itu) :

Namespacing telah berubah - Anda mungkin menemukan pesan ini setelah mengupgrade ke versi bootstrap-ui yang lebih baru ; Anda perlu merujuk ke $uibModal& $uibModalInstance.

Brent
sumber
Terima kasih. Saya menggunakan kode yang sama untuk 2 aplikasi tetapi tidak berfungsi untuk yang terakhir. Perubahan penamaan ini dapat merusak aplikasi yang berfungsi !!!
Tchaps
2
Terima kasih !, Mulai versi 1.0.0 $ Modal dan $ ModalInstance sudah tidak digunakan lagi, changelog di sini
HaRoLD
$ modalInstance sama sekali TIDAK berhasil untuk saya. $ uibModalInstance melakukan
CommandZ
22

Sekadar catatan tambahan untuk masalah yang juga saya alami hari ini: Saya mengalami kesalahan serupa "Penyedia tidak dikenal: $ aProvider" ketika saya mengaktifkan minifikasi / uglify kode sumber saya.

Seperti yang disebutkan dalam tutorial dokumen Angular (paragraf: "Catatan tentang Minifikasi"), Anda harus menggunakan sintaks array untuk memastikan referensi disimpan dengan benar untuk injeksi ketergantungan:

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

Untuk contoh Angular UI Bootstrap Anda menyebutkan Anda harus mengganti ini:

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

dengan notasi larik ini:

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

Dengan perubahan itu, kode jendela modal UI Angular saya yang diperkecil berfungsi kembali.

CREOFF
sumber
Saya tidak berpikir dia berurusan dengan minifikasi sekarang, tetapi ini perlu diperhatikan karena itu juga dapat menyebabkan masalah yang sama.
m59
Lihat ke github.com/btford/ngmin Anda dapat menjalankannya sebelum minifikasi. Anda kemudian dapat terus menulis shortform dan bergantung pada DI dengan nama argumen sementara minifikasi masih berfungsi karena ngmin tidak diperluas ke versi array.
Pascal
11

Jawaban yang jelas untuk kesalahan penyedia adalah ketergantungan yang hilang saat mendeklarasikan modul seperti dalam kasus menambahkan ui-bootstrap. Satu hal yang tidak diperhitungkan oleh banyak dari kita adalah perubahan yang mengganggu saat meningkatkan ke rilis baru. Ya, berikut ini seharusnya berfungsi dan tidak menimbulkan kesalahan penyedia:

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

Kecuali saat kami menggunakan versi baru ui-boostrap. Penyedia modal sekarang didefinisikan sebagai:

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

Saran di sini adalah setelah kami memastikan bahwa dependensi disertakan dan kami masih mendapatkan kesalahan ini, kami harus memeriksa versi library JS yang kami gunakan. Kami juga dapat melakukan pencarian cepat dan melihat apakah penyedia tersebut ada di file.

Dalam kasus ini, penyedia modal sekarang harus seperti berikut:

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

Satu catatan lagi. Pastikan versi ui-bootstrap Anda mendukung versi angularjs Anda saat ini. Jika tidak, Anda mungkin mendapatkan kesalahan lain seperti templateProvider.

Untuk informasi, periksa tautan ini:

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

semoga membantu.

Ozkary
sumber
Dan ui bootstrap wiki berisi daftar semua perubahan awalan.
Bjauy
7

setelah memeriksa bahwa saya memiliki semua ketergantungan yang disertakan, saya memperbaiki masalah dengan mengganti nama $modalmenjadi $uibmodaldan $modalInstancemenjadi$uibModalInstance

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