AngularJS错误未知提供程序：$$ 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: 这应该很容易，我在ui bootstrap网站上关注了Plunker的模态，但出现错误：

$uibModal is an unknown provider $ uibModal是未知的提供商

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. 我有角1.4.8和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>

Answer 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. John Papa的《 Angular Style Guide》是一个不错的开始。

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错误未知提供程序：$$ jqLiteProvider <-$$ jqLite <-$ animateCss <-$ uibModalStack <-$ uibModal

问题描述

1 个解决方案

解决方案1
0 2016-02-10 21:08:00

AngularJS错误未知提供程序：$$ jqLit​​eProvider &lt;-$$ jqLit​​e &lt;-$ animateCss &lt;-$ uibModalStack &lt;-$ uibModal

问题描述

1 个解决方案

解决方案1 0 2016-02-10 21:08:00

AngularJS错误未知提供程序：$$ jqLiteProvider <-$$ jqLite <-$ animateCss <-$ uibModalStack <-$ uibModal

解决方案1
0 2016-02-10 21:08:00