i've been modifying my popup menu inside side menu for a while in ionic framework, and trying to close the side menu on click from the button i've created in the popup. Are there any possible way to do so ?
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
For close menu:
$ionicSideMenuDelegate.toggleLeft(false);
code from ionic:
Related
I am using Ionic version "1.1.0" and angular version "1.4.3"
I am facing issues with Ionic popover, I have created ionic popover out of html template, popover is opened based on user action, i have two buttons on the popup, and in the button handler i am writing code =>$scope.popover.hide() to close the popover, It works fine for the first time, it closes, Second time again when the popup is opened its not getting closed
need your advice and wanted to know if i am missing something
and on hide method promise, i am doing the state transition, second time when we click on the popover buttons, state transition is happening but popover is not getting closed
below is the code snippet i am using
$ionicPopover.fromTemplateUrl('app/layout/eo-confirmation-popup.html', {
scope: $scope,
backdropClickToClose: false
}).then(function (popover) {
$scope.dataLossPopover = popover;
$scope.dataLossPopover.show(angular.element(document.querySelector('.popupPosition')));
});
and on click of button calling below code
$scope.dataLossPopover.hide().then(function () {
$state.go(...);
});
Thanks,
Mallik
Try something like this
$ionicPopover.fromTemplateUrl('app/layout/eo-confirmation-popup.html', {
scope: $scope,
backdropClickToClose: false
}).then(function (popover) {
$scope.dataLossPopover = popover;
});
$scope.openPopover = function(event) {
$scope.dataLossPopover.show(event)
}
$scope.closePopover = function(event) {
$scope.dataLossPopover.hide(event).then({
$state.go();
})
}
If you are opening popup on click
<button ng-click="openPopover($event)"></button>
<button ng-click="closePopover($event)"></button>
I want to implement my piece of code on click of a browser back button and a back link on right click of a mouse.
Kindly help me
window.onbeforeunload = function() { //dosomething();
};
I'm basically trying to figure out how to do a certain event listener within an angular controller. More specifically, when a bootstrap modal is dismissed I would like to fire a function within the angular controller. In jquery you can normally do something like:
$(.some-class).on('click', function() {
// do something
});
What i have is a side navigation with images as buttons. I have gray buttons for when they're inactive and red buttons when they're active. Each button launches a bootstrap modal.
I'm using:
<a type="button" data-toggle="modal" data-target="#overview" ng-click="launchOverview()">
<img ng-src="{{ sideNavActive.overviewSrc }}" /><br />
</a>
and I have an object in my controller:
$scope.sideNavActive = {
"overviewSrc": "img/side-nav/tab-overview-off.png",
"detailsSrc": "img/side-nav/tab-details-off.png",
"contactSrc": "img/side-nav/tab-contact-off.png"
}
When the user clicks one of the side-nav buttons i have an ng-click function that changes the button to "img/...-on.png" so the button turns red (active). When the user clicks another side-nav button it turns that button red and the rest gray.
What I'm trying to do is when the user clicks in the faded area around the modal to dismiss it, i also want the buttons to all reset to gray. According to the bootstrap documentation I should be able to fire a function on the 'hidden.bs.modal' event but I can't get it to work in my angular controller. I have the following function where '#overview' is my id for my modal.
$('#overview').on('hidden.bs.modal', function() {
console.log('function fired!!!!!🔥');
$scope.sideNavActive = {
"overviewSrc": "img/side-nav/tab-overview-off.png",
"detailsSrc": "img/side-nav/tab-details-off.png",
"contactSrc": "img/side-nav/tab-contact-off.png"
}
})
However, this function doesn't fire when the modal is dismissed and I can't figure out why.
One thing I've done to see if the function is actually listening is changed it to:
$('body').on('click', function() {
// function code here
}
and it works. It fires whenever I click anywhere since it's listening on the 'body' element. So I know it's listening but for some reason the 'hidden.bs.modal' event isn't working.
I would use the angular-ui-bootstrap modal if you're not already: http://angular-ui.github.io/bootstrap/#!#modal. There is a callback function on the modal instance that is executed when the modal is dismissed:
modalInstance.result.then(function (someObj) {
// success
}, function () {
// this code will be executed when the modal is dismissed
console.log('Modal dismissed at: ' + new Date());
});
Figured out how to fire a function in an angular controller when modal is dismissed.
angular.element(document).find('.modal').on('hidden.bs.modal', function(){
// do something
console.log('function fired');
});
I am using an angular bootstrap modal.The modal has angular data table in the modal body and close button in the modal footer.The issue i was facing was that once i click on close button,the modal does disappear but screen remains grayed out and inaccessible.So,i included the below code.
$('#modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
After adding this,the modal and the background works fine when i open and close it for the first time but when i open the modal for next time,the gray background does not appear.
Any insight appreciated.
My controller is :
$scope.modalPop = function(){
$scope.modalOverlay = $modal.open({
templateUrl: 'url',
scope: $scope,
animation: false,
windowClass: 'overlay-lg'
});
};
$scope.modalClose = function() {
$scope.modalOverlay .close();
$('#modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
where modalClose is the function on ng-click for close button in modal footer.
I have the following problem:
In my application every link has a tooltip (from bootstrap-ui). If the link is clicked, a alert dialog appears and the tooltip disappears. But in firefox the tooltip is still shown!
Here is a plunker:
plunkr
And thats how I want to use it with tooltip:
<a tooltip="do something" tooltip-popup-delay="300" tooltip-placement="bottom" ng-click="doSomething()">do Something</a>
the function:
$scope.doSomething = function()
{
alert("do Something");
}
After the alert window is confirmed, the tooltip is still shown in firefox.
Can someone help me, how to hide this tooltip in firefox? This is really stupid!
Thank you!
You can manually hide your tooltips by using jQuery like this:
jQuery('.tooltip').hide();
This will hide all instances of the tooltip. In your case, you could call this right after your alert like so:
$scope.doSomething = function()
{
alert("do Something");
jQuery('.tooltip').hide();
}
Make sure you add the jQuery library if you go with this approach.