Angularjs

Question

I'm trying to inject $uibModal into my project, however when the controller loads, I get the following error:

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

I'm using NuGet for my package management.

Angularjs: 1.4.8

Bootstrap: 3.3.6

Angular-Ui-Bootstrap: 0.14.3

Here's the relevant code:

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;
}

I think I'm injecting incorrectly, but it might have to do with how i've included my source files.

I get no console errors aside from the one mentioned above.

I prefer this syntax for my angular code, so I'm hoping for a fix to my code rather than using ('controllername', ['$stuff', 'moreStuff']).

Thanks in advance for any help.

Ganesh Karamala · Accepted Answer

You should inject dependent module before you use it. Your code should be like this:

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

maxime1992 · Answer

I lost 3 hours today to figure out that "angular-bootstrap": "0.12.2" should now be "angular-ui-bootstrap": "1.1.2" in your package json.

I couldn't understand why version 1.1.2 was not found in angular-bootstrap ...

It now works like a charm !

Hope it helps ... :)

Andrew · Answer

Inject ui.bootstrap module into your application module:

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

Also you can use $modal (and maybe its even better) service from ui.bootstrap module instead of $uibModal

Angularjs - $uibModal provider error

Tags:

javascript

angular-ui-bootstrap

KoalaFanatic

3 Answers

Ganesh Karamala

maxime1992

Andrew

Recent Activity

Donate For Us