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 {
}
});
};
Related
Here I'm Using md-dialog box prompt() method of angular- material so after clicking OK button it returns promises where .then's resolve function (the first parameter) is when .hide() is called and the md-dialog box disappear.
Can anyone please suggest me how can I resolve function without calling .hide() method.
Here is my code.
$scope.parentNumberOTPVerification = function(ev,name,mobileNumber,email) {
// Appending dialog to document.body to cover sidenav in docs app
storeService.otpSender(name,mobileNumber,email)
var confirm = $mdDialog.prompt()
.title('Please Provide Your OTP')
.placeholder('OTP')
.targetEvent(ev)
.ok('Verify')
$mdDialog.show(confirm).then(function(result) {
//console.log("result:",result)
}, function() {
$scope.status = 'You didn\'t name your dog.';
});
};
so what i want when i'm hiting ok button of the dialog box first function execute and dialog box hide. have there any way to stop that hidding?
I am trying to create a radio button, that when the user click "active" - an alert will appear. If he clicked cancel, stay (or go back) to the old value.
problem is, the what happens is that both of the radio buttons are "unchecked". and thats obviously not the wanted behaviour.
I've attached a code example.
code example
thanks in advance,
ben.
Add timeout before setting the value to false.
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope,$timeout){
$scope.value = {
text : false
};
$scope.checkRadioButton = function() {
if ($scope.value.text === true) {
if (!window.confirm("Are you sure?")) {
$timeout(function(){
$scope.value.text = false;
});
}
}
}
});
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 need a way to interrupt a user navigating to a new page when there are unsaved changes on the current page. I implemented a modified version of the solution here:
http://weblogs.asp.net/dwahlin/cancelling-route-navigation-in-angularjs-controllers
However, what I see in the browser is that as soon as the user clicks on a link, the view changes and the new controller loads completely while the modal dialog is displayed. When the user clicks 'cancel' and event.preventDefault is fired, the user simply ends up on the new view. This is strange because everything I've read indicates that this is the accepted method, and nobody seems to have this issue. Yet I can't for the life of me see what is wrong with my code.
Here's the function in the main app for handling location changes (ModalService just wraps the angular bootstrap $modal service):
onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange);
function routeChange(event, newUrl, oldUrl) {
//Navigate to newUrl if the form isn't dirty
if (!$rootScope.unsavedChanges) return;
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Ignore Changes',
headerText: 'Unsaved Changes',
bodyText: 'You have unsaved changes. Leave the page?'
};
ModalService.showModal({}, modalOptions).result.then(function () {
$rootScope.unsavedChanges = false;
$location.path(newUrl); //Go to page they're interested in
}
, function () {
event.preventDefault();
});
return;
}
Any ideas?
In case anyone else has this problem, the fix turned out to be quite simple. I moved the code to the stateChangeStart event. Code looks like this:
onRouteChangeOff = $rootScope.$on('$stateChangeStart', routeChange);
function routeChange(event, newState) {
//Navigate to newUrl if the form isn't dirty
if (!$rootScope.unsavedChanges) return;
event.preventDefault();
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Ignore Changes',
headerText: 'Unsaved Changes',
bodyText: 'You have unsaved changes. Leave the page?'
};
ModalService.showModal({}, modalOptions).result.then(function () {
$rootScope.unsavedChanges = false;
$state.go(newState); //Go to page they're interested in
});
}
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