我尝试创建一个弹出的简单模态，并提供不同的菜单选项。它应该很简单，我在ui bootstrap网站上跟随Plunker进行模态但是我收到一个错误，说$ 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();
}
});
我阅读了错误文档并意识到这是一个依赖性错误。但我只是不知道我哪里出错了。我有角度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>
答案 0 :(得分：0)
您必须使用控制器声明中的括号将依赖项注入控制器。
你有什么：
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) {
...
}
我建议采用样式作为避免语法错误的方法。 John Papa's Angular Style Guide是一个好的开始。
如果你使用那种风格，那么你就会明白你所宣称的是什么以及你注射的是什么。更不用说有一个数组的混乱，除了最后一个元素之外的所有元素都是依赖项，最后一个元素是控制器本身。
angular.module('billingModule').controller('StoreBillingCtrl', StoreBillingCtrlFunc);
StoreBillingCtrlFunc.$inject = ['$scope', '$uibModal'];
StoreBillingCtrlFunc function($scope, $uibModal){
...
}