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?
Related
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 have the following code which is supposed to prevent the back button from exiting the app and just show an alert. The alert comes up but after i hit "ok", it still exits the app. I have no idea why the preventDefault isn't working.
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
e.preventDefault();
alert('Back Button is Pressed!');
}
In mobile safari browser, sometimes when i click on goggle places options dropdown that doesn't work. So basically i select and the dropdwon closes but nothing appears in input.
I tried this solution also :
$timeout(function () {
var container = document.getElementsByClassName('pac-container');
// disable ionic data tab
angular.element(container).attr('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
angular.element(container).on("click", function(){
document.getElementById('autocomplete').blur();
});
}, 500);
}
}
But it doesn't work. Sometimes the selection works fine but not all time
I've tried to come up with some sort of "error checker/validation" for my users IF they forget to Save the edits they made on their profiles.
The user enters the Profile.html state. They start to update some of their info (i.e name, phone number, etc.). INSTEAD of pressing the SAVE CHANGES button they navigate away from the Profile state by clicking the SideMenu icon at the top left of their mobile screen.
Since the form is technically now consider to be "$dirty". I've tried to use this angular property at first but I couldn't really get the results I wanted so I tried my luck with $watch..
ProfileController.js
$rootScope.isFormDirty = false;//global variable 'isFormDirty'->inject in controller.js (toggleLeftSideMenu())
$scope.$watch('updateDriverProfileInfo', function(newValue, oldValue) {//new & oldValue = ng-model when form is 1st 'viewed' is dirty
//http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
if (newValue !== oldValue) {
// console.log("updatingg")
$rootScope.isFormDirty = true;
}
}, true);
Angular docs on $watch
Maybe I should of made a factory or Service for this now that I think about it but at the time I used $rootScope so that I can set a global variable isFormDirty on this controller and use it on the General Controller that holds the Side Menu's logic in this Ionic app.
controller.js (this is where the Controller for the SideMenu is)
$scope.sidemenuIsOpen = false;
$scope.toggleLeftSideMenu = function() {//ng-click from menu.html
$scope.sidemenuIsOpen = !$scope.sidemenuIsOpen;
if ($scope.sidemenuIsOpen && $rootScope.isFormDirty) {
var confirmPopup = $ionicPopup.confirm({
title: 'Changes were not saved',
template: 'Do you want to save your changes?',
});
confirmPopup.then(function(res) {
if (res) {
console.log('Run updateDriverProfile()');
} else {
console.log('Allow user to continue w/o changes');
}
});
}
};
That's basically the gist of my code. It actually "works" but I have identified a pattern and this is where I need your assistance to either suggest a whole different method to accomplish this or perhaps some refactoring tips for this current code.
The Pop up does show when the user clicks on the Side Menu button BUT I don't think it really matters if the form is $dirty or not..
The bigger issue is that the Pop up starts showing regardless if you are trying to leave the profile.html view or any other view for that matter.
When I wrote this code I was under the impression that the Pop up and toggleLeftSideMenu functions would ONLY work on the Profile view since I am "watching" the updateDriverProfileInfo object and I also created that global variable to use between the Menu Controller and Profile Controller.
you need to have a good understanding on ionic Lifecycle, try with any of the below events
$scope.$on('$ionicView.leave', function(){
// Anything you can think of
});
$scope.$on('$ionicView.beforeLeave', function(){
// Anything you can think of
});
$scope.$on('$ionicView.unloaded', function(){
// Anything you can think of
});
find more information here http://www.gajotres.net/understanding-ionic-view-lifecycle/
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