I have three different controllers and views
From Screen when button is clicked Modal1 opens
$modal.open({
templateUrl: 'abc.html',
controller: 'abcCtrl',
size: 'lg',
scope: $scope,
});
In modal1 there is next button so on Click of Next Button Want to close Modal1 and open Modal2
$scope.validate = function(isValid) {
if (!isValid) {
$scope.errors = 'Please fill-up required fields';
} else {
$scope.errors = '';
$modal.open({
templateUrl: 'Payment.html',
controller: 'PaymentCtrl',
size: 'lg',
scope: $scope,
});
}
};
In modal2 there is next button so on Click of Next Button Want to close Modal2 and open Modal3
$scope.placeOrder = function() {
$scope.cart.abc().then(function(result) {
$modal.open({
templateUrl: 'orderSummary.html',
controller: 'SummaryCtrl',
size: 'lg',
scope: $scope,
resolve: {
items: function() {
return result.data;
}
}
});
},
function(err) {
//error msg
});
};
If I add $modalInstance.close to Modal1
while Opening another modal that is Modal2, Modal1 is Closed and Modal2 is Opened But none of the buttons work. Modal3 doesnt get opened Don't Know the actual issue what is happening.
Please help me. Thanks in advance.
it seems like you are looking for wizard...
have a look here
From Main Controller First Open Your Modal1,on Close of Modal1 i.e
var modalInstance = $modal.open({
templateUrl: 'abc',
controller: 'abcCtrl',
size: 'lg',
scope: $scope,
});
modalInstance.result.then(function(result) {
$scope.def();
}, function(err) {
//
});
$scope.def = function(){
//open another
}
call another function and in that function open another modal and similarly you can do.
Related
I've recently switched all our modals directives in our app over to Angular-ui-Bootstrap modals. Much better, however running into a new style of modal which closes on mouseleave instead of a cancel click.
this.leaveTag = (tag) => {
TagHover.off();
};
this.hoverTag = (tag) => {
TagHover.display();
};
Above is the view logic that calls functions inside of our TagHover Factory.
Below is the Factory, the TagHover.display works fine like with our other modals, but what I'm trying to do with the leaveTag > TagHover.off is call the modal.close. Not working so far.
My question is how do you call the close functionality within the TagHoverController, or close on the $uibModal from my tagsPanel component -> TagsHover Factory? (Without using $scope or $rootScope events)
I'm not trying to call close/cancel from within the TagHover Ctrl scope, but trying to call close from a Parent scope.
const TagHover = angular.module('tickertags-shared')
.controller('TagHoverController', TagHoverController)
.factory('TagHover', factory);
TagHoverController.$inject = [
'TagHover'];
function TagHoverController(
TagHover) {
this.$onInit = () => {
console.log('TagHover onInit')
};
this.cancel = () => this.$close();
}
factory.$inject = ['$uibModal'];
function factory($uibModal) {
const display = () => {
const modal = $uibModal.open({
controllerAs: 'tghov',
bindToController:true,
templateUrl: 'tags/tag_hover.html',
windowClass: 'dash-modal',
resolve: {},
controller: 'TagHoverController'
});
};
const off = () => {
$uibModal.close({});
};
return {
display,
off
}
}
module.exports = TagHover;
Here are the docs https://angular-ui.github.io/bootstrap/#/modal
The open method returns a modal instance, an object with the following properties:
close(result) (Type: function) - Can be used to close a modal, passing a result.
I also logged out the $uibModal object and I only see an open function, no close :(
In your case, Your are using Factory for dynamic Modal. so you can use $uibModalStack in the below two ways.
$uibModalStack.dismissAll(); // dismiss all opened modal
$uibModalStack.dismiss(openedModal.key); // dismiss modal by key
Example of dismiss Method.
var top = $uibModalStack.getTop();
if (top) {
$uibModalStack.dismiss(top.key);
}
It's very important to do dismissing the modal during router changes since its dynamic modal.
In general, $uibModal will help to open the modal then each modal is $uibModalInstance, if you want to close modal inside the modal.
Opening Modal on Event
angular.module('myPage')
.controller('PageController', ['$uibModal',
function($uibModal) {
function onModalLink() {
$uibModal.open({
templateUrl: 'app/modals/paymentTpl.html',
controller: 'PaymentModalController as vm',
windowClass: 'generalModal myModal'
});
}
}
]);
To Close from Instance.
angular.module('paymentModal')
.controller('PaymentModalController', [
'$uibModalInstance',
function ChangeRepaymentController($uibModalInstance) {
function onCancel() {
$uibModalInstance.close(repaymentPercentage);
}
}
]);
modalInstance - The modal instance. This is the same $uibModalInstance injectable found when using controller.
WIKI Reference: https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs
This is wrong approach - you can not "just close modal", cause you dont tell which modal to close. I recommend you to redesign this...
You can have a look at $uibModalStack - it stores opened modals and have methods like dismisAll
I use close() method with $uibModal and open() method for manage in AngularJS $uiModal
Open method
vm.lanzarPopShowTask = lanzarPopShowTask;
function lanzarPopShowTask(index){
vm.modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-top',
ariaDescribedBy: 'modal-body-top',
templateUrl: '/btask/index/task.html',
size: 'm',
controller: function ($scope) {
vm.task = vm.tasks[index];
vm.index = index;
},
scope: $scope
});
}
And Close method
vm.modalInstance.close();
When doing this I set the modal as a scope variable then use $scope.sweetModal.close() or $scope.sweetModal.dismiss() you just have to remember that if you were to do the following it wouldn't work:
$scope.openModal = function () {
$scope.sweetModal = $uibModal.open({
templateUrl: '/modals/sweetModal.html',
size: 'md',
scope: $scope,
backdrop: true
})
.result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};
Where as the following would work because of how the variable is set:
$scope.openModal = function () {
$scope.sweetModal = $uibModal.open({
templateUrl: '/modals/sweetModal.html',
size: 'md',
scope: $scope,
backdrop: true
});
$scope.sweetModal.result.then($scope.modalCloseFunction, $scope.modalDismissFunction);
};
I am using angular-modal-service to open a modal.
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
modal.close.then(function(result) {
if (result) {
// do something
}
});
});
}
After I open this modal, I want to call a function to close it from the main controller
$scope.closeLoader = function() {
// close the modal here
}
How can I do this?
You can assign the modal closing function to the $scope when the modal is completely loaded. I added a dummy function, that it won't execute undefined if the modal is closed, before it is ready. You can also skip that, if you can assure, that it won't be possible.
$scope.closeLoader = angular.noop;
$scope.showLoader = function(message) {
ModalService.showModal({
templateUrl: "/templates/loader.html",
controller: "ctrl",
inputs: {
message: "loading"
}
}).then(function(modal) {
$scope.closeLoader = modal.close;
});
};
Below is the code:
app.controller('MainController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
html
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
I want to close all the modal pop up boxes when a user clicks on a close button of the final confirmation modal popup.
But the modal windows that are open do belong to different controllers. Here is the snippet :
function getQuickCasePopup($scope, $uibModal, $rootScope) {
var templateUrl = BasePath + 'App/Transaction/Views/common/QuickCaseSearch.tpl.html';
var controller = 'QuickCaseSearchCtrl';
OpenModal($scope, $uibModal, null, templateUrl, controller, null, null, '', $rootScope);
}
function getAddCasePopup($scope, $uibModal, $rootScope) {
var templateUrl = BasePath + 'App/Transaction/Views/common/CreateCase.tpl.html';
var controller = 'AddCaseCtrl';
OpenModal($scope, $uibModal, null, templateUrl, controller, null, null, '', $rootScope);
}
function getAdvanceCasePopup($scope, $uibModal, $rootScope) {
var templateUrl = BasePath + 'App/Transaction/Views/common/AdvanceCaseSearch.tpl.html';
var controller = 'AdvanceCaseCtrl';
OpenModal($scope, $uibModal, null, templateUrl, controller,null, null, 'lg', $rootScope);
}
function OpenModal($scope, $uibModal, $stateParams, templ, ctrl, grid, row, size, $rootScope) {
var CssClass = '';
if (size === 'lg') {
CssClass = 'app-modal-window';
}
var ModalInstance = ModalInstance || $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: templ,
controller: ctrl, // Logic in instantiated controller
windowClass: CssClass
});
And the confirmation pop - up code looks like :
$("#iConfirmationModal").modal();
$("#iConfirmationModal").on('hidden.bs.modal', function () {
//$(".app-modal-window").dialog("close"); //Did not work
$state.go('transaction.search', {});
});
So I want to close all the modal pop-ups and then redirect . Can I achieve the same ?
The modal is a singleton object so you can call $scope.$close() and it all close all modal instance
You may have multiple options,
create a service which will manage all modal status.
Use $emit\$broadcast for notifications.
use third part libraries like amplifyjs and use there pub\sub operations.
How to trigger event before closing bootstrap modal on angularjs directive ,
angular.module('app').controller("myModal", function myModal($scope, $modalInstance) {
$scope.modalInstance = $modalInstance;
});
template
< div> My modal < /div>
and directive
angular.module('app').directive('mymodal',function( $rootScope ){
return{
restrict : 'E',
replace : true,
templateUrl :'mymodal.html',
scope :{
modalInstance :'='
},
link: function (scope, elem, attr) {
scope.modalInstance.result.then(function() {
console.log('close');
}, function() {
console.log('dimiss');
});
}
});
I want to have confirm message before closing modal after click on backdrop.
call modal dialog from here
$scope.openModal = function() {
$scope.modalInstance = $modal.open({
animation: true,
template: '<mymodal modal-instance="modalInstance"></mymodal>',
controller: 'myModal',
backdrop: true,
keyboard: true,
});
}
Check out this answer, it works for me.
var instance = $modal.open(...);
instance.result.then(function(){
//Get triggers when modal is closed
}, function(){
//gets triggers when modal is dismissed.
});
I'm using AngularJS and BootstrapUI for my modals and I need the possibility
to open multiple modals at the same time, when I open a modal I need to put a button/link to open a secondone
Is there any way to do this?
May be I am missing smth, but there is not magic in modals: open modal = show some div with controller... The rest is done by css.
http://plnkr.co/edit/GnadPfU9OFDFfyEa11vE?p=preview
modal in modal:
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modal, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});