I am trying to close and reopen a dialog from the actual dialog controller's view. What ends up happening is that after dialog close/open, it won't properly close again. Escape works on some browsers (but the overlay remains) and clicking the background may cause the dialog to close but the overlay will remain (browser dependant).
Question: How can I close/reopen a dialog from a function/button/event on the dialog's controller and that the dialog's close works properly (on escape or clicking background).
The demo below is just a boiled down sample that demonstrates the issue as I will be doing a next/prev and I'd like to close/open on those clicks but am having this issue with not being able to exit the modal.
Here is the online demo: http://plnkr.co/h8djNiSlH6c7d8SNzMmb
Open dialog
Close dialog - works fine except IE (another issue).
Open dialog
Click button inside dialog to close/reopen
Try to close the dialog
Controllers:
function PopupCtrl($scope, $dialog, dialog, item, Utils) {
$scope.items = Utils.getItems();
$scope.item = item;
$scope.reOpen = function (item) {
item = $scope.items[1];
dialog.close();
var d = $dialog.dialog({
dialogFade: true,
backdropClick: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');
};
}
function MainCtrl($scope, $window, $dialog, $location, $timeout, Utils) {
$scope.items = Utils.getItems();
$scope.openDialog = function (item) {
item = $scope.items[0];
var d = $dialog.dialog({
dialogFade: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');
};
}
I've tried this with angular bootstrap v0.2.0 and v.0.3.0 so it is either a bug or there is something I am missing with regards to how I am coding the logic.
This turned out to be an issue with the core dialog directive. Filed a issue and consequent pull request to address:
Details here: https://github.com/angular-ui/bootstrap/pull/381
Related
I have a grid-view containing many records and I want this behaviour that when the user double-click on each record, a window-like modal dialogue opens for him to view details about that record, and meanwhile he/she can read other records on the grid-view and maybe double click on another record to open a new window to view selected record details while another window is still open.
my question is very similar to this question I found on StackOverflow
but the accepted answer doesn't seem to work.
this is my effortless project to test this workflow,
app.controller('ModalCtrl', function($scope, $modal) {
$scope.showModal = function() {
$scope.opts = {
templateUrl : 'modalContent.html',
controller : ModalInstanceCtrl,
resolve: {}
};
$scope.opts.resolve.item = function() {
}
var modalInstance = $modal.open($scope.opts);
modalInstance.result.then(function(){
},function(){
console.log("Modal Closed");
});
}; })
but it's created by modal and I know modals are not designed for such behaviour and I would like to know the best solution for such thing,
thanks in advance.
I am new to ionic. I have created confirmation popup. I need to open popup only once by a button click. Must restrict background click if popup already opened. But here I can click the button if already popup opened. So need to restrict background click and avoid to open popup as multiple times. Please help me to resolve this issue. Thanks in advance. I have mentioned my code.
<button ng-click="click()"></button>
$scope.click = function(){
$scope.stopService();``
}
//Stop service confirm popup
$scope.stopService = function () {
var confirmPopup = $ionicPopup.confirm({
title: 'Confirmation',
template: 'Are you sure do you want to stop the current service?'
});
confirmPopup.then(function (res) {
if (res) {
} else {
}
});
};
I am using Ionic framework,I have successfully ported the fullCalender to my project,
I can able to call a funtion on eventClick, even it gives the alert of that event title perfectly.
But my main objective is to open the ionic modal instead of alert() with event title.
The code works till the alert comes, I am new to ionic need some idea how to acheive this.So far I have witten the code below
app.js Code:
$scope.calOptions = {
editable : true,
header : {
left: 'prev',
center: 'title,today',
right: 'next'
},
eventClick: function(calEvent, jsEvent, view){
var a=calEvent.description;
var b=calEvent.title;
alert('ALERT-1:' +a );
$scope.safeApply(function()
{
alert('ALERT-2:' + calEvent.description);
$scope.eventModal(a,b)
});
};
$scope.eventModal=function(a,b){
alert('ALERT-3:'+b);
$scope.eventModal.show();
}
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.eventModal = $ionicModal;
},{
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
To be more clear the above code shows that the "eventClick:" works till "ALERT-3" ,however,on event click it calls the function "$scope.eventModal=function(a,b)" but after that at the next line at $scope.eventModal.show(); it says that "show is not a function", I want to open modal with variables passed to "$scope.eventModal=function(a,b)" function.
Need an idea to acheive open the modal with parameters passed to the "$scope.eventModal=function(a,b)".
Thanx in advance.
Try doing some simplier:
eventClick: function(calEvent, jsEvent, view){
$scope.a = calEvent.description;
$scope.b = calEvent.title;
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
$scope.modal.show();
}).catch(function(err){
console.log(err);
});
};
And inside modal, you can bind {{::a}} and {{::b}} or whatever you want do with them.
I have a side menu with:
<ion-side-menus enable-menu-with-back-views="true">
So it is accesable from each view of my app. So now when there is a back view i have a back icon AND the menu icon in the top left nav-bar. How can i disable the menu-icon when there is a back-icon?
The method from here:
$scope.$on('$ionicView.beforeEnter', function (e, data) {
if (data.enableBack) {
$scope.$root.showMenuIcon = false;
} else {
$scope.$root.showMenuIcon = true;
}
});
Is not working! Because it is never called! Maybe $ionicView.beforeEnter does not exist anymore? At least it is never fired.
I solved that problem with this code in each view controller
$scope.$on('$ionicView.beforeEnter', function () {
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function () {
$ionicSideMenuDelegate.canDragContent(true);
});
Hope it helps
don't forget to add $ionicSideMenuDelegate to your controller
I am building a small message system. I use tabs in my state (inbox, outbox). Also, i want to sent a message when i click a "contact" link. If i click that link, this should happen:
change state to messages state
open other tab, called "newmsg"
At this moment, this is what i have:
<a ng-click="mailContact()">contact</a>
and i my controller:
$scope.mailContact = function() {
$state.go('root.messages');
$scope.openTab('new');
};
Obviously this is not working, because $scope.openTab('new'); will never execute. The state changes to what i want, but the tab is not opened. I do not have a clue of how to get it done.
Ok, stupid thing was i had an init which opened the "inbox"...
Now i wrote a service which does the trick.
app.factory('msgTabService', ['$rootScope', function($rootScope) {
var msgTabService = {};
var tabname = "inbox";
msgTabService.set = function(tab) {
tabname = tab;
};
msgTabService.get = function() {
return tabname;
};
msgTabService.openTab = function(tab) {
if ($rootScope.currenttab !== tab)
{
$rootScope.currenttab = tab;
msgTabService.set(tab);
}
};
return msgTabService;
}]);
The question may be similar to: Save State of Tab content when changing Route with angularjs and BootStrap Tabs