AngularJS错误未知提供程序:$jqLiteProvider

I 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 site but I'm getting an error that says $uibModal is an unknown provider. Here's the angular code:

我尝试创建一个简单的模式，弹出并提供不同的菜单选项。这应该很容易，我跟踪了ui引导站点上的modals，但是我得到了一个错误，说$uibModal是一个未知的提供者。这是角代码:

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 realize 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.

我读了错误文档，发现这是一个依赖项错误。但我就是不知道哪里出错了。角1。4。8和u -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>

1 个解决方案

#1

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){
    ...
}

#1