I have used locationchangestart to prevent dialog close on clicking backspace key. It is working commonly for all dialogs. So it won't work for path change while closing the dialog. How can I restrict this? I need to change the $location.path when I close the dialog. Please suggest.
If your model is like
$scope.closeLoginModal = function () {
$location.path("/myhome");
});
};
Related
I have a case where in which 2 asides are loaded and I have to clear a variable when the aside is closed pressing ESC or by clicking outside the aside.
I searched online and found that the following code can be used in the case of a modal. What is the code for aside?
scope.$on('modal.hide', function() {
console.log('modal... -hide');
});
How to watch for an Aside closing in angular-strap
The above code is not working for aside.
Is this approach correct? Otherwise, please suggest a method.
In the above case the modal name is not specified. So when we have more than one modal or aside how do we differentiate the closing of the modal or aside? In the current case, I don't have to differentiate the modals. But how to catch the event differently?
Update
The following code woks for aside.
scope.$on('aside.hide', function() {
console.log('aside... -hide');
});
The second question of how to identify each aside closing differently needs to be found out now.
With v2.1.1 of angular-strap the hide event for $aside was changed to aside-hide.
The AngularJS framework invokes handlers of $scope/$rootScope events with arguments:
scope.$on('aside.hide', function(event, data) {
console.log('aside... -hide');
console.log(event);
console.log(data);
});
Use those arguments to get information about the event.
I am using ionic filter, When I click the cancel button in filter bar I am able to remove the filter but when I want to do that automatically without clicking the cancel button when shifting tabs I am not able to do that.
// code in angular controller for initializing the filter
var filterBarInstance;
filterBarInstance = $ionicFilterBar.show({
});
// when I shift tabs I am calling the below method to close the modal of the filter(if the modal is opened)
filterBarInstance = $ionicFilterBar.show({
cancel : '',
});
I am calling the above methods whcih are present in the filter directive but that method is not getting triggered. Kindly , use the url https://github.com/djett41/ionic-filter-bar/blob/master/js/ionic.filter.bar.directive.js and provide me some solutions to fix this.
try filterBarInstance()
I hope that solve your problem
I'm creating an Ionic application with a form and some required fields.
When the form is submitted and if it isn't valid, I display an alert message using Ionic's $ionicPopup service.
My problem is: the user can press "ENTER" or ("Go" button within Android) to both invoke form submission and close the popup which causes another popup to open.
You can see this happening here:
Sample Code
Focus the input, press ENTER and when the error message is displayed, press ENTER again to close it. Another popup will open (most likely because the input behind the backdrop still has focus or maybe because the modal is created within the form - having ENTER invoke submit again).
Is there any way to avoid that behavior? Maybe the ENTER within the $ionicPopup to close it without submitting the form again, or at least having some code to close any active popups before displaying a new one? Because when you open multiple popups, if you try the mouse (or tap) to close a message, the user is prompted to then close all other dialogs before being sent back to the main screen.
I know I could try to get the reference to the popup and call the close() method but it didn't quite work for me. Eventually the new alert opens before the previous one is fully closed and the backdrop gets stuck on the screen forever.
Thanks for helping.
As it turns out, my actual problem is that the $ionicPopup does not support pressing ENTER (or "go" on Android keyboard) to close the popup. For some reason, I tried to take the focus out of the inputs but it didn't work.
For anyone with the same problem, I ended up creating an angular directive to close the device keyboard when the form is submitted.
Here's the directive code:
(function () {
'use strict';
angular
.module('myModule')
.directive('closeKeyboardOnSubmit', closeKeyboardOnSubmit);
closeKeyboardOnSubmit.$inject = ['$ionicPlatform', '$cordovaKeyboard'];
function closeKeyboardOnSubmit($ionicPlatform, $cordovaKeyboard) {
var directive = {
require: '^form',
restrict: 'A',
link: link
};
return directive;
function link (scope, element) {
element.on("submit", function(){
$ionicPlatform.ready(function(){
$cordovaKeyboard.close();
});
});
}
}
})();
then I used it on the form tags like this:
<form close-keyboard-on-submit ...>
Obviously the problem still happens when testing directly on the browser but works when deploying to the devices.
I am trying to make a modal for login/register forms and wanted to make something that is reusable, I came across this blog post that goes through making a directive. I used that as well as angular-ui-bootstrap docs to make my modal. It does work, but the first time I click the button to pop the modal, it doesn't work. I can see the scope getting created using Batarang, but nothing pops. Subsequent clicks do work, and if I have 2 buttons, no matter which one I press first, it doesn't work, and after that either one works.
I made up a plnkr to show this. I am using templates etc so I added those. You can see that pressing "Register" or "Login" will not pop up the modal, but if you click again, the modals pop. You can also see the scope getting created on the first press with Batarang.
Thanks in advance for the help!
Edit:
I found some more information that might be helpful. The first time I click the link, the scope.closeFormModal gets called.
Try add:
scope.$watch(
function () {
return scope.formModal;
},
function (newData, oldData) {
if (newData === oldData) {
return;
}
if (newData) {
$compile($element.contents())(scope);
}
});
to link function that was returned from $compile function.
i'm creating an AlertFactory because ui.bootstrap.dialog doesn't works in my app.
So i type follow code: http://jsfiddle.net/Premier/BHqKB/17/
enter code here
It works very well if you click on the "Open dialog" button: on screen appear a dialog with my messages.
I also register a listener on keydown: listener fires a broadcast event on which is registered a scope related function. This function calls openDialog to show the dialog. In this way angular doesn't interpolates arguments and alert is shown with {{title}} placeholder.
What is wrong in my code?
Thank you.
You need an $apply to invoke a digest cycle.
ng.element(document).on('keydown', function(e){
//alert('keydown');
//openDialog();
$rootScope.$broadcast('openDialog');
$rootScope.$apply();
});