Angularjs - $uibModal fournisseur d'erreur

Je suis en train d'injecter $uibModal dans mon projet, toutefois, lorsque le contrôleur de charge, j'obtiens l'erreur suivante:

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

Je suis à l'aide de NuGet pour mon forfait de gestion.

Angularjs: 1.4.8

Bootstrap: 3.3.6

Angular-Ui-Bootstrap: 0.14.3

Voici le code correspondant:

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 vais injecter de façon incorrecte, mais il pourrait avoir à faire avec la façon dont j'ai inclus mes fichiers sources.

Je n'ai pas de console d'erreurs en dehors de celui mentionné ci-dessus.

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

Merci d'avance pour toute aide.

OriginalL'auteur KoalaFanatic | 2015-12-24

  1. 30

    Vous devez injecter dépendant du module avant de l'utiliser. Votre code devrait ressembler à ceci:

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

    OriginalL'auteur Ganesh Karamala

  2. 12

    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 forfait json.

    Je ne pouvais pas comprendre pourquoi la version 1.1.2 n'a pas été trouvé dans angulaires-bootstrap ...

    Il fonctionne maintenant comme un charme !

    Espère que ça aide ... 🙂

    github.com/angular-ui/bootstrap dit: "ne pas installer angular-ui-bootstrap'. Un référentiel distinct - bootstrap-bower - hôtes compilé le fichier javascript et de verdure.json."

    OriginalL'auteur maxime1992

  3. 3

    Injecter ui.bootstrap module dans votre module d'application:

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

    Vous pouvez également utiliser $modal (et peut-être même mieux) service de ui.bootstrap module au lieu de $uibModal

    Merci! Le dernier que j'ai entendu, $modal est déconseillé par l'interface utilisateur-bootstrap, et ils préfèrent l'utilisation de $uibModal. Je suis sûr qu'il ya des différences, mais ils semblent fonctionner de la même manière.
    oui, définitivement
    Cela a résolu mon problème. Im en utilisant angulaire 1.4.9 et angular-ui-bootstrap 1.3.2 et sur la page officielle (angular-ui.github.io/bootstrap) ils écrivent que vous devez utiliser $uibModal mais cela ne fonctionne pas pour moi.

    OriginalL'auteur Andrew

  4. 0

    Il a travaillé pour moi. J'ai eu angularJS version 1.2.16. La version compatible de l'interface utilisateur-bootstrap est 0.12.0. Besoin de google la version compatible avec le toujours avant de l'utiliser.

    OriginalL'auteur avitash

  5. 0

    Je essayer de résoudre mon problème.

    Installer la dernière version de angulaire-bootstrap

    npm install angular-bootstrap or bower install angular-bootstrap

    OriginalL'auteur Divyang Patel