Mic*_*ael 10 javascript angularjs angular-ui-bootstrap
我试图创建一个弹出的简单模态,并提供不同的菜单选项.它应该很简单,我在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>
您必须使用控制器声明中的括号将依赖项注入到控制器中。
你有什么：
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 的 Angular 风格指南是一个好的开始。
如果您使用这种风格，那么您正在声明什么以及您正在注入什么就会变得很清楚。更不用说数组中除最后一个元素之外的所有元素都是依赖项，而最后一个元素是控制器本身的混乱。
angular.module('billingModule').controller('StoreBillingCtrl', StoreBillingCtrlFunc);
StoreBillingCtrlFunc.$inject = ['$scope', '$uibModal'];
StoreBillingCtrlFunc function($scope, $uibModal){
...
}
| 归档时间： |
|
| 查看次数： |
1671 次 |
| 最近记录： |