Angular UI bootstrap uibModalInstance.result not yielding any value
Solution 1
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();
}
}
}());
Solution 2
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 usecontroller: myModalController as vm
(or in your case ctrl instead).In your directive however you're defining
controllerAs: 'ctrl',
but you later usevm
.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 theuibModalInstance.result
promise. You should use$uibModalInstance.close()
to activate the resolve handler. 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
hakuna
FullStack developer & DevSecOps engineer primarily works on Microsoft .Net,Angular2-5,AWS/Azure,HTML,CSS,SQL Server, Oracle, setting up infrastructure, configuration and deployment. Worked with various clients, business domains across multiple large/small scale projects leading/managing the teams with in US and internationally.
Updated on June 14, 2022Comments
-
hakuna almost 2 years
Below is my code for the directive
cabinet
and my two controllersCabinetThumbnails
,ModalCtrl
. Based on my requirement i am using the directivecabinet
and theCabinetThumbnails
to render couple of widgets and then on click of every widget usingModalCtrl
to open a popup. 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 toocabinetService.getComments(thumbnailData)
. What's wrong here ?couldn't figure out.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(); } } }());
-
hakuna about 8 yearsthank you very much for your suggestion , but i already tried moving the service call to the actual referencing controller and everything worked smooth. I will try your approach too. thank you !