AngularJS Error Unknown provider: $$jqLiteProvider <- $$jqLite <- $animateCss <- $uibModalStack <- $uibModal

Question

I'm trying to create a simple modal that pops up and gives different menu options. It should be easy, and I followed the Plunker for modals on the ui bootstrap website but I'm getting an error:

$uibModal is an unknown provider

Here's the angular code:

angular.module('billingModule', ['ngAnimate', 'ui.bootstrap']);

angular.module('billingModule').controller('StoreBillingCtrl', function ($scope, $uibModal) {
    $scope.openStoreBilling = function () {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'storeBillingContent.html',
            controller: 'ModalInstanceCtrl',
        });
    };
});

angular.module('billingModule').controller('OfficeBillingCtrl', function ($scope, $uibModal) {
    $scope.openOfficeBilling = function () {
        var modalInstance = $uibModal.open({
            animation: true,
            templateUrl: 'officeBillingContent.html',
            controller: 'ModalInstanceCtrl',
        });
    };
});

angular.module('billingModule').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
    $scope.close = function () {
        $uibModalInstance.dismiss();
    }
});

I read the error docs and realized that this is a dependency error. But I just don't see where I went wrong. I have angular 1.4.8 and ui-bootstrap 0.14.3.

Here are the scripts that I added:

<head runat="server">
    <title>DP Billing</title>
    <link href="../CSS/bootstrap.css" rel="stylesheet" />
    <link href="../CSS/base.css" rel="stylesheet" />
    <script src="../Scripts/angular.js"></script>
    <script src="../Scripts/angular-animate.js"></script>
    <script src="../Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="../Scripts/billing-modals.js"></script>
</head>

I edited my question to include the script tags I have for the html. Is that what your asking for? — Michael
So I figured it out. It turns out that 1.4.8 does not work with ui-bootstrap. Only up to 1.4.7 works. Why I have no clue. — Michael
strange, but seems 1.4.8 work ok with ui-bootstrap 0.14.3. can you change this plunkr to reproduce your problem? — Grundy
I tried to replicate it in the plunkr but could not. I then switched my project back to 1.4.8 to test, and it stopped working again. Then I decided to reinstall angularJS and all the packages I had installed since the project began. After this it started working again. My only reasoning is that somewhere along the line the angular.js file got corrupted or changed. I'm sorry for asking such a worthless question now. — Michael

Wilmer SH Wilmer SH · Accepted Answer · 2016-02-10T21:08:00

You have to inject the dependency into your controller using the brackets in your controller declaration.

What you have:

angular.module('billingModule').controller('StoreBillingCtrl', function ($scope, $uibModal) { ... });

What you should have:

angular.module('billingModule').controller('StoreBillingCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) { ... }]);

The same applies to the other controllers

A better style:

angular.module('billingModule').controller('StoreBillingCtrl', ['$scope', '$uibModal', StoreBillingCtrlFunc]);

StoreBillingCtrlFunc function ($scope, $uibModal) { 
  ... 
}

I would recommend adopting a style as an approach to avoid syntactical errors. John Papa's Angular Style Guide is a good start.

If you use that style it becomes clear what it is that you are declaring and what it is that you are injecting. Not to mention the confusion of having an array where all the elements except for the last one are dependencies, and the last one being the controller itself.

angular.module('billingModule').controller('StoreBillingCtrl', StoreBillingCtrlFunc);

StoreBillingCtrlFunc.$inject = ['$scope', '$uibModal'];

StoreBillingCtrlFunc function($scope, $uibModal){
    ...
}

AngularJS Error Unknown provider: $$jqLiteProvider <- $$jqLite <- $animateCss <- $uibModalStack <- $uibModal

1 Answers