Bilinmeyen sağlayıcı: $ modalProvider <- AngularJS ile $ modal hatası

Question 1

Bootstrap Modal penceresini uygulamaya çalışırken bu hatayı almaya devam ediyorum. Nedeni ne olabilir? Http://angular-ui.github.io/bootstrap/#/modal adresinden her şeyi buraya kopyaladım / yapıştırdım .

Question 2

Bu tür bir hata, bir denetleyici, hizmet vb. İçin bir bağımlılık yazdığınızda ve bu bağımlılığı oluşturmadığınızda veya eklemediğinizde ortaya çıkar.

Bu durumda, $modalbilinen bir hizmet değildir. Açısal önyükleme yaparken ui-bootstrap'i bağımlılık olarak geçirmemişsiniz gibi görünüyor. angular.module('myModule', ['ui.bootstrap']);Ayrıca, güvende olmak için ui-bootstrap'ın (0.6.0) en son sürümünü kullandığınızdan emin olun.

Hata 0.5.0 sürümünde atılır, ancak 0.6.0'a güncelleme $ modal hizmetini kullanılabilir hale getirir. Bu nedenle, 0.6.0 sürümüne güncelleyin ve modülünüzü kaydederken ui.boostrap gerektirdiğinizden emin olun.

Yorumunuzu yanıtlamak: Bu, bir modül bağımlılığını nasıl enjekte edeceğinizdir.

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

});

Güncelleme:

$modalHizmet olarak değiştirilmiştir $uibModal.

$ UibModal kullanma örneği

// 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 yıl sonra (o sırada sorun bu değildi) :

İsim aralığı değişti - bootstrap-ui'nin daha yeni bir sürümüne yükselttikten sonra bu mesajla karşılaşabilirsiniz ; $uibModal& bakmanız gerekiyor $uibModalInstance.

Question 4

Bugün de karşılaştığım bir sorunla ilgili fazladan bir not: Kaynak kodumun küçültülmesini / çirkinleştirmesini etkinleştirdiğimde benzer bir "Bilinmeyen sağlayıcı: $ aProvider" hatası aldım.

Angular docs eğitiminde belirtildiği gibi (paragraf: "Küçültme Üzerine Bir Not") , bağımlılık ekleme için referansların doğru şekilde tutulduğundan emin olmak için dizi sözdizimini kullanmanız gerekir:

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

İçin Eğik UI Bootstrap Örneğin Bunu bu değiştirmeniz gerekir söz:

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

bu dizi gösterimiyle:

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

Bu değişiklikle, küçültülmüş Angular UI modal pencere kodum yeniden işlevsel hale geldi.

Question 5

Sağlayıcı hatası için açık cevap, ui-bootstrap eklenmesi durumunda olduğu gibi bir modül bildirirken eksik bağımlılıktır. Çoğumuzun hesaba katmadığı tek şey, yeni bir sürüme geçerken meydana gelen önemli değişikliklerdir. Evet, aşağıdakiler çalışmalı ve sağlayıcı hatasını artırmamalıdır:

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

UI-boostrap'ın yeni bir sürümünü kullandığımız zamanlar hariç. Mod sağlayıcı artık şu şekilde tanımlanmaktadır:

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

Buradaki tavsiye, bağımlılıkların dahil edildiğinden emin olduktan ve hala bu hatayı aldığımızda, JS kitaplığının hangi sürümünü kullandığımızı kontrol etmeliyiz. Ayrıca hızlı bir arama yapabilir ve bu sağlayıcının dosyada olup olmadığını görebiliriz.

Bu durumda, mod sağlayıcı artık aşağıdaki gibi olmalıdır:

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

Bir not daha. Ui-bootstrap sürümünüzün mevcut angularjs sürümünüzü desteklediğinden emin olun. Değilse, templateProvider gibi başka hatalar alabilirsiniz.

Bilgi için bu bağlantıyı kontrol edin:

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

Umarım yardımcı olur.

Question 6

Tüm bağımlılıkların dahil olduğunu kontrol ettikten sonra, adını ve adını $modaldeğiştirerek sorunu çözdüm .$uibmodal$modalInstance$uibModalInstance

Question 7

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