web-dev-qa-db-fra.com

Angularjs - Erreur du fournisseur $ uibModal

J'essaie d'injecter $ uibModal dans mon projet. Cependant, lorsque le contrôleur se charge, le message d'erreur suivant s'affiche:

Error: [$injector:unpr] Unknown provider: $uibModalProvider <- $uibModal <- abilityListController

J'utilise NuGet pour la gestion de mes paquets.

Angularjs: 1.4.8

Bootstrap: 3.3.6

Angular-Ui-Bootstrap: 0.14.3

Voici le code pertinent: 

Index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="app/app.js"></script>
    <script src="app/homeController.js"></script>
    <script src="app/abilityList/abilityListController.js"></script>
</head>
<body>
    <div ng-app="tecApp">
        <div ng-controller="homeController as vm">
            </div>
            <div ng-controller="abilityListController as vm" ng-if="true">
                <div ng-include="'app/abilityList/abilityList.html'"></div>
            </div>
        </div>
    </div>
</body>
</html>

app.js:

angular.module("tecApp", []);

AbilityListController.js:

angular
    .module('tecApp')
    .controller('abilityListController', AbilityListController);

AbilityListController.$inject = ['$uibModal'];

function AbilityListController($uibModal) {
    var vm = {};
    return vm;
}

Je pense que je n'injecte pas correctement, mais c'est peut-être dû à la manière dont j'ai inclus mes fichiers source. 

Je ne reçois aucune erreur de console en dehors de celle mentionnée ci-dessus.

Je préfère cette syntaxe pour mon code angulaire, j'espère donc un correctif à mon code plutôt que d'utiliser ('controllername', ['$ stuff', 'moreStuff']).

Merci d'avance pour votre aide.

javascriptangularjsangular-ui-bootstrap
15
KoalaFanatic

Vous devez injecter le module dépendant avant de l'utiliser. Votre code devrait être comme ça:

angular
    .module('tecApp',['ui.bootstrap'])
30
Ganesh Karamala

J'ai perdu 3 heures aujourd'hui pour comprendre que "angular-bootstrap": "0.12.2" devrait maintenant être "angular-ui-bootstrap": "1.1.2" dans votre paquet json.

Je ne comprenais pas pourquoi la version 1.1.2 n’était pas trouvée dans angular-bootstrap ...

Cela fonctionne maintenant comme un charme!

J'espère que ça aide ... :)

14
maxime1992

Injectez le module ui.bootstrap dans votre module d'application:

angular.module("tecApp", ["ui.bootstrap"])

Vous pouvez aussi utiliser le service $modal (et peut-être même meilleur) depuis le module ui.bootstrap au lieu de $uibModal

3
Andrew

Cela a fonctionné pour moi. J'ai eu angularJS version 1.2.16. La version compatible de ui-bootstrap est 0.12.0. Besoin de google la version compatible toujours avant d'utiliser.

0
avitash

J'essaie de résoudre mon problème.

Installer la dernière version de angular-bootstrap

npm install angular-bootstrap or bower install angular-bootstrap
0
Divyang Patel