![](/img/trans.png)
[英]Angular Bootstrap Modal $uibModalInstance Unknown Provider in Angular 1.5 Component
[英]Angular UI bootstrap uibModalInstance.result not yielding any value
以下是我的指令cabinet
和两个控制器CabinetThumbnails
ModalCtrl
。 根据我的要求,我使用指令cabinet
和CabinetThumbnails
渲染几个小部件,然后使用ModalCtrl
单击每个小部件以打开弹出窗口。 窗口小部件生成正常,弹出窗口也正常打开,但是(uibModalInstance.result.then(function (thumbnailData))
不能正常工作。因此,它也不会打入服务cabinetService.getComments(thumbnailData)
。这是怎么回事?不知道。
function () {
'use strict';
angular
.module('myModule')
.directive('cabinet', function () {
return {
restrict: 'E',
replace: true,
controller: CabinetThumbnails,
controllerAs: 'ctrl',
bindToController: true,
link: link,
templateUrl: 'app/cabinet/cabinet.directive.html',
scope: {
thumbnail: '='
}
};
});
function link(scope, el, attrs) {
}
CabinetThumbnails.$inject = ['$scope','$uibModal','cabinetService'];
function CabinetThumbnails($scope,$uibModal,cabinetService) {
var vm = this;
vm.showImage = showImage;
activate();
function activate() {
}
function showImage() {
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'app/components/capture/cabinet.pop-up.html',
controller: ModalCtrl,
controllerAs: 'ctrl',
size: 'lg',
resolve: {
thumbnailData: function () {
return vm.thumbnail;
}
}
});
uibModalInstance.result.then(function (thumbnailData) {
spinner.spinnerShow();
//call the service to get the comments
cabinetService
.getComments(thumbnailData)
.then(function (data) {
$scope.comments = data;
})
.catch(function (err) {
growl.err('Unable to open the screen shot, Please try later !', {ttl: 20000});
})
.finally(spinner.spinnerHide);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}
ModalCtrl.$inject = ['$scope', '$uibModalInstance', 'thumbnailData', 'growl'];
function ModalCtrl($scope, $uibModalInstance, thumbnailData, growl) {
var ctrl = this;
ctrl.thumbnailData = thumbnailData;
ctrl.cancel = cancel;
function cancel() {
$uibModalInstance.dismiss();
}
}
}());
这里有几件事情要考虑:
首先,在定义模态时不需要使用controllerAs
,在ui-bootstrap中,您应该只使用controller: myModalController as vm
(或者在您的情况下为ctrl)。
然而,在您的指令中,您定义的是controllerAs: 'ctrl',
但是您稍后使用vm
。
在模态控制器中,您仅使用$uibModalInstance.dismiss()
方法,dismiss方法关闭模态并激活uibModalInstance.result
promise的promise拒绝处理程序。 您应该使用$uibModalInstance.close()
激活解析处理程序。 否则所有这些代码将无法运行。
我会这样写的
spinner.spinnerShow();
$uibModal.open({
animation: true,
templateUrl: 'app/components/capture/cabinet.pop-up.html',
controller: ModalCtrl as ctrl,
size: 'lg',
resolve: {
thumbnailData: function () {
return ctrl.thumbnail;
}
}
}).result
.then(function (thumbnailData) {
//call the service to get the comments
return cabinetService.getComments(thumbnailData);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
}).then(function (data) {
// we get to this 'then' after cabinetService.getComments finished
$scope.comments = data;
}).catch(function (err) {
$log.err('Unable to open the screen shot, Please try later !', {ttl: 20000});
}).finally(spinner.spinnerHide);
}
并添加
ctrl.ok = function() {
$uibModalInstance.close(valueForResolveHandler);
};
到ModalCtrl
实际上,我已将服务调用移至引用控制器,它已解决并正常工作。
(function () {
'use strict';
angular
.module('myModule')
.directive('cabinet', function () {
return {
restrict: 'E',
replace: true,
controller: CabinetThumbnails,
controllerAs: 'ctrl',
bindToController: true,
link: link,
templateUrl: 'app/components/capture/cabinet.directive.html',
scope: {
thumbnail: '='
}
};
});
function link(scope, el, attrs) {
}
CabinetThumbnails.$inject = ['$scope','$uibModal'];
function CabinetThumbnails($scope,$uibModal) {
var vm = this;
vm.showImage = showImage;
activate();
function activate() {
}
function showImage() {
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'app/components/capture/cabinet.pop-up.html',
controller: ModalCtrl,
controllerAs: 'ctrl',
size: 'lg',
resolve: {
thumbnailData: function () {
return vm.thumbnail;
}
}
});
}
}
ModalCtrl.$inject = ['$scope', '$uibModalInstance', 'thumbnailData', 'growl','cabinetService'];
function ModalCtrl($scope, $uibModalInstance, thumbnailData, growl,cabinetService) {
var ctrl = this;
ctrl.thumbnailData = thumbnailData;
ctrl.save = save;
ctrl.cancel = cancel;
//call this method to get executed while the directive loads to open the pop-up
getComments();
function getComments()
{
cabinetService
.getComments(thumbnailData)
.then(function (data) {
ctrl.comments = data;
})
.catch(function (err) {
growl.err('Unable to get comments, Please try later !', {ttl: 20000});
})
}
function save() {
var form = $scope.cabinetForm;
if (!form.$invalid && form.$dirty && form.$valid) {
var data = {
CabinetFileID: ctrl.thumbnailData.CabinetFileID,
Comment: ctrl.inputcomment
};
//call the service
cabinetService
.addComments(data)
.then(function (data) {
//refresh the comments by calling the getComments method again
ctrl.thumbnailData.CommentCount = ctrl.thumbnailData.CommentCount + 1;
getComments();
ctrl.inputcomment = '';
})
.catch(function (err) {
growl.err('Unable to add comment, please try later !', {ttl: 20000});
})
} else {
growl.info('Please enter the comment');
}
}
function cancel() {
$uibModalInstance.dismiss();
}
}
}());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.