Globally disable click out side of ionicModal - angularjs

ionicModal is appearing like a popup along with backdrop in iPad (Fine in android tabs with full screen view). Modal is closing whenever user clicks on backdrop. It will be an issue if user is filling a form.
Yes, I can use backdropClickToClose: false property while creating modal but I used over 60 modals all over my app. Is there any way to set backdropClickToClose:false globally in a config like
$ionicModal.config {
backdropClickToClose : false
}
Thanks in advance.

Unfortunately, I have not been able to find how to do this using config. There currently doesn't seem to be a way to do it that way.
The only thing I found is the commit for the backdropClickToClose configuration for $ionicModal, which may give others a clue as to how this can be achieved.
Another idea would be to wrap the $ionicModal in a service and have some default parameters implemented in there, but I am not sure whether that would be a solution to your problem.
If you really want to be able to configure this, you may want to consider submitting an issue on GitHub, which you can do here.

Related

Can a UI be kept rendered even if it does not match its react-router route?

would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0
It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.
Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.
according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery

How to switch states insight angular modal?

What I want to do is having a modal and insight it have 2 states (login and signup). Tried it first with bootstrap but i couldn't make it work having 2 different states and after some research found a good example
http://embed.plnkr.co/DJP7sp/preview
The problem with the example is that when i close the modal, I cannot open it again without refreshing the page (had to change the example to backdrop: true to be able to close the modal). Does anyone know why?
Also, I found Angular Modal Service, but couldn't find anything about having different state views insight the modal again.
Thanks!

Open dialog disappears after screen turns off

When my app has an open dialog e.g. dlg.show(); and the screen turns off by timeout the active and displayed dialog is disappeared after turning on the screen again. I'd like to have the dialog still preset.
Is there a good/recommended way to fix/workaround this behavior?
For a solution, I could imagine one of the following approaches, but could not find further information:
Disabling screen timeout globally for the app.
Disabling screen timeout for dialog specifically.
Using another dialog type (modal, modeless or interaction) that keeps staying.
Maybe there are other ways to fix this?
Use a variable that you store the state of in Preferences. Perhaps a Boolean so when the dialog shows it is true, and if someone exits the app you save it in preferences (you can use exit form action or add something to the lifecycle methods). When the app restarts, get the state from Preferences and display the dialog again if the variable is true.
You could use and integer or string if there are multiple possible dialogs that you might need to show.

AngularJS window does not render (blank page) but resizing window renders it

I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.

Is it possible to show google map popup in modal

I am attempting to find a reference to popup the info box into a modal. My usecase is such that the Google Maps popup is a very useful navigation tool, however since it anchors clicked object it is often off screen on a mobile device.
I haven't found anything that suggests this is possible.
This was something I looked into but never went anywhere with.
Here is an example I did not create this just something I had tucked away in my bookmarks... seems to fit with what you are doing
http://www.bootply.com/106707

Resources