I am using $uibmodal , with 2 buttons close and cancel(in the component).
the problem is that when the popup is triggered while refreshing the page or other triggered. I need to resize the window or click on somewhere in the page. only then the button are being clickable
function opentestmodal()
{
$rootScope.testmodal = $uibModal.open( {
animation: true,
backdrop:'static',
component: 'testmodalComponent',
windowClass: "testmodalPopupClass",
windowTopClass: "toptestmodalPopupClass",
});
$rootScope.testmodal.result.then(function () {
}, function () {
});
}
it release the buttons even if I click on the chrome address bar
Related
I am working on chat app, and the problem seems to be that directive for scroll bottom, to the last item in ng-repeat is not working properly when there are images in messages.
So it just doesn't scroll all the way bottom.
I think the reason is that directive scrolls before the image is fully loaded.
// Scroll to bottom directive
.directive('schrollBottom', function ($timeout) {
return {
scope: {
schrollBottom: "="
},
link: function (scope, element) {
scope.$watchCollection('schrollBottom', function (newValue) {
if (newValue)
{
$timeout(function() {
$(element[0]).scrollTop($(element)[0].scrollHeight);
}, 0, false);
}
});
}
}
})
Check here to see how to wait for an image to load before doing something. You can add a class to all images and wait for all images with that class to load before scrolling.
I would keep what logic you have, and put it inside of an img.onload callback handler. Then any scrolling to the bottom will only occur once all images have loaded.
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'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'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: