[英]Angular UI bootstrap uibModalInstance.result not yielding any value
Below is my code for the directive cabinet
and my two controllers CabinetThumbnails
, ModalCtrl
. 以下是我的指令
cabinet
和两个控制器CabinetThumbnails
ModalCtrl
。 Based on my requirement i am using the directive cabinet
and the CabinetThumbnails
to render couple of widgets and then on click of every widget using ModalCtrl
to open a popup. 根据我的要求,我使用指令
cabinet
和CabinetThumbnails
渲染几个小部件,然后使用ModalCtrl
单击每个小部件以打开弹出窗口。 The Widgets are generating fine, pop-up is opening fine too but (uibModalInstance.result.then(function (thumbnailData))
is not working. So , its not hitting the service too cabinetService.getComments(thumbnailData)
. What's wrong here ?couldn't figure out. 窗口小部件生成正常,弹出窗口也正常打开,但是
(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();
}
}
}());
Here are a couple things to consider: 这里有几件事情要考虑:
First of all you don't need to use controllerAs
when you're defining the modal, in ui-bootstrap you should just use controller: myModalController as vm
(or in your case ctrl instead). 首先,在定义模态时不需要使用
controllerAs
,在ui-bootstrap中,您应该只使用controller: myModalController as vm
(或者在您的情况下为ctrl)。
In your directive however you're defining controllerAs: 'ctrl',
but you later use vm
. 然而,在您的指令中,您定义的是
controllerAs: 'ctrl',
但是您稍后使用vm
。
In you modal controller you are only using the $uibModalInstance.dismiss()
method, the dismiss method closes the modal and activates the promise rejection handler for the uibModalInstance.result
promise. 在模态控制器中,您仅使用
$uibModalInstance.dismiss()
方法,dismiss方法关闭模态并激活uibModalInstance.result
promise的promise拒绝处理程序。 You should use $uibModalInstance.close()
to activate the resolve handler. 您应该使用
$uibModalInstance.close()
激活解析处理程序。 otherwise all that code wouldn't run. 否则所有这些代码将无法运行。
I would have written it like this 我会这样写的
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);
}
And add 并添加
ctrl.ok = function() {
$uibModalInstance.close(valueForResolveHandler);
};
to ModalCtrl 到ModalCtrl
Actually i moved the service call to the referencing controller, it got resolved and worked. 实际上,我已将服务调用移至引用控制器,它已解决并正常工作。
(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.