AngularJS Error Unknown provider: $$jqLiteProvider

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>

Wilmer SH · Accepted Answer

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

Tags:

javascript

angularjs

angular-ui-bootstrap

Michael

1 Answers

Wilmer SH

Recent Activity

Donate For Us