web-dev-qa-db-fra.com

Fournisseur inconnu: $ modalProvider <- erreur modale $ avec AngularJS

Je continue de recevoir cette erreur pendant que j'essaie d'implémenter bootstrap) La fenêtre modale. Quelle pourrait en être la cause? J'ai tout copier/coller de http: // angular -ui.github.io/bootstrap/#/modal ici.

javascriptangularjsmodal-dialog
95
Xeen

Ce type d'erreur se produit lorsque vous écrivez une dépendance pour un contrôleur, un service, etc., et que vous n'avez pas créé ou inclus cette dépendance.

Dans ce cas, $modal N'est pas un service connu. On dirait que vous n'avez pas passé ui-bootstrap en tant que dépendance lors du démarrage angulaire. angular.module('myModule', ['ui.bootstrap']); Assurez-vous également que vous utilisez la dernière version de ui-bootstrap (0.6.0), pour votre sécurité.

L'erreur est renvoyée dans la version 0.5.0, mais la mise à jour vers la version 0.6.0 rend le service $ modal disponible. Donc, mettez à jour vers la version 0.6.0 et assurez-vous d'avoir besoin de ui.boostrap lors de l'enregistrement de votre module.

En réponse à votre commentaire: C'est comment vous injectez une dépendance de module.

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

});

Mise à jour:

Le service $modal A été renommé en $uibModal.

Exemple utilisant $ 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
});
194
m59

5 ans plus tard (cela n'aurait pas été le problème à l'époque) :

L'espacement de noms a changé - vous pouvez tomber sur ce message après avoir mis à niveau une version plus récente de bootstrap-ui ; vous devez vous référer à $uibModal & $uibModalInstance.

53
Brent

Juste une note supplémentaire pour un problème que j'ai aussi rencontré aujourd'hui: j'ai eu une erreur similaire "Fournisseur inconnu: $ aProvider" lorsque j'ai activé minification/uglify de mon code source.

Comme indiqué dans le tutoriel Angular docs (paragraphe: "Une remarque sur la minimisation") , vous devez utiliser la syntaxe du tableau pour vous assurer que les références sont conservées correctement pour l'injection de dépendance:

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

Pour le interface utilisateur angulaire Bootstrap =), vous mentionnez que vous devez remplacer ceci:

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

avec cette notation de tableau:

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

Avec ce changement, mon code minified Angular UI) était de nouveau fonctionnel.

22
CREOFF

La réponse évidente à l'erreur du fournisseur est la dépendance manquante lors de la déclaration d'un module, comme dans le cas de l'ajout de ui-bootstrap. La seule chose que beaucoup d’entre nous ne tenons pas compte, c’est les changements importants lors de la mise à niveau vers une nouvelle version. Erreur:

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

Sauf lorsque nous utilisons une nouvelle version de ui-boostrap. Le fournisseur modal est maintenant défini comme:

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

Le conseil ici est qu'une fois que nous avons vérifié que les dépendances sont incluses et que nous obtenons toujours cette erreur, nous devrions vérifier quelle version de la bibliothèque JS nous utilisons. Nous pourrions également faire une recherche rapide et voir si ce fournisseur existe dans le fichier.

Dans ce cas, le fournisseur modal devrait maintenant être le suivant:

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

Encore une note. Assurez-vous que votre version de ui-bootstrap prend en charge votre version actuelle d’angularjs. Sinon, vous risquez d’obtenir d’autres erreurs telles que templateProvider.

Pour plus d'informations, consultez ce lien:

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

j'espère que ça aide.

11
ozkary

après avoir vérifié que toutes mes dépendances étaient comprises, j'ai résolu le problème en renommant $modal en $uibmodal et $modalInstance en $uibModalInstance

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