Something strange is happening to my app. I'm using $ionicLoading to show and hide the loading template when I go to a page of my app. Everything works fine in the current page after the loading template appears, but if I open a modal page in the current view, it'll be showed but I won't be able to interact with the modal view, everything seems frozen. The app continues running but I can't select anything in the modal. I'm pretty sure that $ionicLoading is what is making this problem appears because if I eliminate it, everything works fine.
So, How could I solve it?.
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $http, $ionicPopover, $rootScope,$ionicLoading) {
$ionicModal.fromTemplateUrl('templates/nuevoEvento.html', {
scope: $scope,
animation: 'slide-in-right'
}).then(function(modal) {
$scope.modalEvento = modal;
});
// Open the login modal
$scope.evento = function() {
$scope.modalEvento.show();
};
$scope.closeEvento = function() {
$scope.modalEvento.hide();
};
$scope.showLoading = function() {
$ionicLoading.show({
template: 'Loading...'
});
};
$scope.hideLoading = function(){
$ionicLoading.hide();
};
})
.controller('EventosCtrl', function($scope, $stateParams, $http, $timeout,$ionicLoading ) {
$scope.init=function(){
$scope.showLoading();
$http({method: 'GET', url: BASEPATH + '/eventos'})
.success(function(data){
$scope.hideLoading();
$scope.eventos = data;
console.log(data);
var evLeft = [];
var evRight = [];
for(var i = 0; i < data.length; i = i + 2){
evLeft.push(data[i]);
if(data[i+1]){
evRight.push(data[i+1]);
}
}
$scope.tarjetasLeft = evLeft;
$scope.tarjetasRight = evRight;
})
You said you cannot interact with the modal view.
Try the option noBackdrop (or even maybe hideOnStateChange)
More info at the docs
Related
My ionic app uses jsdata datastore for caching http://www.js-data.io/docs/home
. I am trying to implement the pull to refresh feature in my app using ion-refresher directive.
The doRefresh doesnot seem to make a Get Call at all. When I click on Pull to refresh, all the console.log messages in the code below get executed. However, if I check the Network's tab, I dont see a Get call being made at all.
No data gets refreshed, nor do I get any error. I am not sure why this is happening or what I am doing wrong.
My code:
HTML:
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
Controller:
.controller('ProfileInfo', function($scope, Profile) {
$scope.load = function() {
$scope.error = undefined;
Profile.findAll().then(function(response) {
$scope.Profile = response[0];
}).catch(function(err) {
$scope.error = err;
});
};
$scope.load();
$scope.doRefresh = function() {
console.log("hi")
$scope.error = undefined;
$scope.Profile = [];
Profile.findAll().then(function(response) {
console.log($scope.Profile)
$scope.Profile = response[0];
console.log($scope.Profile)
console.log("Done")
}).catch(function(err) {
console.log("err", err)
$scope.error = err;
}).finally(function(){
console.log("in finally")
$scope.$broadcast('scroll.refreshComplete');
});
};
});
Inside your doRefresh method, you need to pass bypassCache: true to findAll all to force it try make a new request, e.g.
var query = {};
var options = {
bypassCache: true
};
Profile.findAll(query, options).then(...);
Read more about the behavior of DS#findAll in JSData 2.x.
Here is my code..If I remove close modal function,there is no effect. If I click any where outside the modal, the modal closes. But I need this close modal function as I need to set a flag in it for further use. How can I proceed further?
$scope.$on('$ionicView.afterEnter', function() {
$scope.openModal();
}
$ionicModal.fromTemplateUrl("settings/settingsModal.html", {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function(){
$scope.modal.show();
}
$scope.closeModal = function(){
$scope.modal.hide();
};
}
There are a two ways of implementing modal in Ionic. One way is to add separate template and the other is to add it on top of the regular HTML file, inside script tags. First thing we need to do is to connect our modal to our controller using angular dependency injection. Then we need to create modal. We will pass in scope and add animation to our modal.
After that we are creating functions for opening, closing, destroying modal and the last two functions are place where we can write code that will be triggered if modal is hidden or removed. If you don't want to trigger any functionality when modal is removed or hidden you can delete the last two functions.
Controller's Code:
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
HTML Code :
<script id = "my-modal.html" type = "text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class = "title">Modal Title</h1>
</ion-header-bar>
<ion-content>
<button class = "button icon icon-left ion-ios-close-outline"
ng-click = "closeModal()">Close Modal</button>
</ion-content>
</ion-modal-view>
</script>
There are also other options for modal optimization. I already showed how to use scope and animation. The table below shows other options.
Modal options
The close modal function is meant for situations where you would like to close the modal manually. For example after a certain time it has been open or if something happens/the user does something for example presses a button.
There are ways of listening to when the modal is hidden/removed which will suit your situation and needs. For example:
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
console.log('modal was hidden');
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
console.log('modal was removed');
});
With these you should be able to do what I understood you are wanting to do.
Straight from the documentation: http://ionicframework.com/docs/api/service/$ionicModal/
I have trouble with updating a $scope object when It's inside a Modal.
$scope.lists = {};
$ionicModal.fromTemplateUrl('foobar-show.html', function($ionicModal) {
$scope.modal = $ionicModal;
}, {
scope: $scope
});
As you can see it's the normal $ionicModal
And it opens the Modal with this: <a ng-click="doOpen()">Modal</a>
$scope.doOpen = function(){
$scope.modal.show();
$scope.foobar = {};
};
Inside I do a {{ lists.length }} > returns 0
But then I'm calling inside that Modal the function:
$scope.fooAction = function(a){
$scope.lists.push(a);
alert($scope.lists.length);
};
The alert returns a +1. So 1 after the first time, but the View of the modal still returns 0... Is it a different scope or something? I pass it with the ionicModal, right? How to fix this?
Beacause the modal is created the first you enter the view and than is being cached, you have to tell your view not to cache it.
<ion-view cache-view="false">
I catch modal.hidden event, and do some check on it. When the check is false, I want to prevent the modal from hiding. I use e.preventDefault(). But it doesn't work.
My code & CodePen:
$scope.$on('modal.hidden', function(event) {
var isPassed = false;
// do some check
if (isPassed == false) {
event.preventDefault();
}
});
You can use the backdropClickToClose and hardwareBackButtonClose option when setting up the modal and also hide the back button. This will prevent the modal from being closed:
// Load the modal from the given template URL
$scope.modal = {};
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up',
backdropClickToClose: false,
hardwareBackButtonClose: false
}).then(function(modal) {
$scope.modal = modal;
});
You can then do some check and set those values to true again, and also show the back button. This will still be user friendly and the user can close the modal in a proper way.
function checkSomething(){
// The timeout is only to demonstrate, do your check here
$timeout(function(){
console.log("Now user can close modal")
$scope.isPassed = true;
$scope.modal.backdropClickToClose = true;
$scope.modal.hardwareBackButtonClose = true;
}, 3000)
}
Updated codepen here
I try this code to show loading message like below but there is only loading animation appears without the message in content. How can I fix this?
$scope.show = function() {
$scope.loading = $ionicLoading.show({
content: 'Loading feed...'
});
};
The content property should be renamed to template as shown here:
$scope.show = function() {
$scope.loading = $ionicLoading.show({
template: 'Loading feed...'
});
};
Here is the place where this is described in the docs:
http://ionicframework.com/docs/api/service/$ionicLoading/