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>
Related
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
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 am using ionic to build an app. I've written a global img directive that displays an alert box whenever an img is loaded. The problem I am facing is this directive is called for all views, but if I display an image inside an ionic-modal, the directive is not called.
My directive code is:
.directive('img', function () {
return {
restrict: 'E',
link: function (scope, element, attrs) {
console.log ("********** IMG DIRECTIVE ");
}
}
})
I've added a codepen here so you can see what is going on. It's a fork from a standard ionic modal example, so has some redundant code.
http://codepen.io/asker/pen/YXXyZj?editors=101
a) Click on the link at the bottom of the home page that says "CLICK ON IMAGE TO SEE DIRECTIVE" and you will see just before the image loads, the directive alert displays
b) Click on "Sign In" on home page and in the next page, click "Open Modal" button - and you will see the image show up but my directive not called
Thanks
I think it is because your img directive is called when you click "Sign In", the home tab loaded the modal.html in your HomeTabCtrl before you click "Open Modal".
You can make changes like following:
Changes to home.html: use ng-click="openModal()" instead of ng-click="modal.show()"
Changes to HomeTabCtrl:
$scope.openModal = function(){
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$ionicModal.show();
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
}); }
I am using the angular modal service and I am trying to implement some keypress functionality for a smooth UX.
<button type="button" autofocus ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
The problem is that when the modal pops up, it doesn't have focus. Focus remains on the button clicked to activate the modal.
Is there some way to reset autofocus without reloading the page? Or is there some way to grab focus when the modal activates, but have it do so each time the modal opens?
I tried implementing the focus service as described in the answer to this post, but I couldn't get it to work with the modal.
Here is a plunker that demonstrates the behavior:
Plunker
Here is the working demo:
Plunker
I ended up finding this example:
Programmatically Setting Focus
It accomplishes it with a directive on whatever element you want to get focus:
app.directive('syncFocusWith', function($timeout, $rootScope) {
return {
restrict: 'A',
scope: {
focusValue: "=syncFocusWith"
},
link: function($scope, $element, attrs) {
$scope.$watch("focusValue", function(currentValue, previousValue) {
if (currentValue === true && !previousValue) {
$element[0].focus();
} else if (currentValue === false && previousValue) {
$element[0].blur();
}
})
}
}
});
Getting it to work for my modal was easy. I just added this little timeout function to the modal's controller, giving it a half a second to display the modal before trying to set the focus:
$timeout(function() {
$scope.isFocused = true;
},500)
and this attribute on the element we want to get focus:
sync-focus-with="isFocused"