尝试用angularjs和ui-bootstrap构建一个模态:
版
在主应用程序文件中,我将'ui.bootstrap'包括在内
var App = angular.module('aotaApp', ['ui.router','ui.bootstrap','checklist-model','ngSanitize'])
.controller("myController", function($scope,$state, $http)
在StatusService中我使用它作为
App.service("StatusModalService", ["$uibModal",
function ($uibModal) {
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: 'resources/template/modal/confirmationModal.html'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $uibModalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$uibModalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$uibModalInstance.dismiss('cancel');
};
}
}
return $uibModal.open(tempModalDefaults).result;
};
}]);
但我收到了错误
angular-1.5.3.js:13424错误:[$ injector:unpr]未知提供者:$ uibModalProvider < - $ uibModal < - StatusModalService
我是角度新手,主要是在app中添加ui.bootstrap。但它没有给予任何帮助。
请指导我。
这似乎是一个版本问题,需要升级你的ui-bootstrap
https://github.com/compact/angular-bootstrap-lightbox/issues/42
npm install angular-bootstrap or bower install angular-bootstrap
这也可能是由于$uibModal
的重命名。如果您有此错误,请尝试使用$modal
。