Je continue à recevoir cette erreur lorsque j'essaie de mettre en œuvre la fenêtre modale de bootstrap. Quelle pourrait en être la cause ? J'ai tout copié/collé de http://angular-ui.github.io/bootstrap/#/modal ici.
Réponses
Trop de publicités?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. Il semble que vous n'ayez pas passé ui-bootstrap comme dépendance lors du démarrage d'Angular. angular.module('myModule', ['ui.bootstrap']);
Vérifiez également que vous utilisez la dernière version de ui-bootstrap (0.6.0), par sécurité.
L'erreur est déclenché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'exiger ui.boostrap lorsque vous enregistrez votre module.
Je réponds à votre commentaire : C'est ainsi que l'on injecte 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 :
En $modal
a été renommé en $uibModal
.
Exemple d'utilisation de $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
});
Juste une remarque supplémentaire sur un problème que j'ai également rencontré aujourd'hui : J'ai eu une erreur similaire " Unknown provider : $aProvider" lorsque j'ai activé la minification/uglify. de mon code source.
Comme mentionné dans le Tutoriel Angular docs (paragraphe : "A Note on Minification") vous devez utiliser la syntaxe des tableaux pour vous assurer que les références sont conservées correctement pour l'injection de dépendances :
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
Pour le Exemple d'Angular UI Bootstrap vous mentionnez que vous devriez remplacer ceci par cela :
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 */
}];
Grâce à cette modification, mon code de fenêtre modale Angular UI minifié était à nouveau fonctionnel.
La réponse évidente pour 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 prennent pas en compte, ce sont les changements de rupture lors de la mise à niveau vers une nouvelle version. Oui, ce qui suit devrait fonctionner et ne pas provoquer l'erreur du fournisseur :
var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);
Sauf lorsque l'on utilise 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 nous sommes assurés que les dépendances sont incluses et que nous obtenons toujours cette erreur, nous devons 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]);
Une note supplémentaire. Assurez-vous que votre version de ui-bootstrap supporte votre version actuelle d'angularjs. Sinon, vous pouvez obtenir d'autres erreurs comme templateProvider.
Pour plus d'informations, consultez ce lien :
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
J'espère que cela vous aidera.
- Réponses précédentes
- Plus de réponses