gpt4 book ai didi

javascript - AngularJS 错误未知提供者 : $$jqLiteProvider <- $$jqLite <- $animateCss <- $uibModalStack <- $uibModal

转载 作者:数据小太阳 更新时间:2023-10-29 03:57:47 25 4
gpt4 key购买 nike

我正在尝试创建一个弹出并提供不同菜单选项的简单模式。这应该很容易,我在 ui bootstrap 网站上按照 Plunker for modals 进行操作,但出现错误:

$uibModal is an unknown provider

这是 Angular 代码:

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>

最佳答案

您必须使用 Controller 声明中的括号将依赖项注入(inject) Controller 。

你有什么:

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

你应该拥有的:

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

同样适用于其他 Controller

更好的风格:

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

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

我建议采用一种样式来避免语法错误。 John Papa's Angular Style Guide是一个好的开始。

如果你使用那种风格,你就会清楚你声明的是什么,你注入(inject)的是什么。更不用说拥有一个数组的困惑,其中除了最后一个元素之外的所有元素都是依赖项,而最后一个元素是 Controller 本身。

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

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

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

关于javascript - AngularJS 错误未知提供者 : $$jqLiteProvider <- $$jqLite <- $animateCss <- $uibModalStack <- $uibModal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34496781/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com