AngularJS错误未知提供程序:$$jqLiteProvider<-$$jqLite<-$animate

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

本文关键字：lt animate jqLite jqLiteProvider AngularJS 未知 程序 错误      更新时间：2023-09-26

我正在尝试创建一个简单的模式，它会弹出并提供不同的菜单选项。这应该很容易，我在ui引导程序网站上关注了Plunker的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();
    }
});

我阅读了错误文档，意识到这是一个依赖性错误。但我就是不知道哪里出了问题。我有angular 1.4.8和ui bootstrap 0.14.3。

以下是我添加的脚本：

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

您必须使用控制器声明中的括号将依赖项注入控制器。

您所拥有的：

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

你应该拥有的：

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

这同样适用于其他控制器

更好的风格：

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

我建议采用一种风格来避免语法错误。约翰·帕帕的《角度风格指南》是一个良好的开端。

如果你使用这种风格，那么你声明的是什么以及注入的是什么就变得很清楚了。更不用说数组中除了最后一个元素之外的所有元素都是依赖项，而最后一个是控制器本身，这会带来混乱。

angular.module('billingModule').controller('StoreBillingCtrl', StoreBillingCtrlFunc);
StoreBillingCtrlFunc.$inject = ['$scope', '$uibModal'];
StoreBillingCtrlFunc function($scope, $uibModal){
    ...
}
相关文章：