Saya terus menerima kesalahan ini karena saya mencoba menerapkan jendela Modal bootstrap. Apa penyebabnya? Saya telah menyalin / menempel semuanya dari http://angular-ui.github.io/bootstrap/#/modal di sini.
Saya terus menerima kesalahan ini karena saya mencoba menerapkan jendela Modal bootstrap. Apa penyebabnya? Saya telah menyalin / menempel semuanya dari http://angular-ui.github.io/bootstrap/#/modal di sini.
Jawaban:
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) {
});
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
});
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.
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.
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.
var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];