Hello ionic community!
I am a rookie ionic dev, I am building a simple app using the Tabs And Navigation: Nightly example as a template to how to create a tab based app.
I am slightly confused how to use modals correctly, could somone please show me a simple example using the tabs navs as a base?
I have add the controller:
app.controller('MainCtrl', function($scope, $ionicModal) {
$scope.info = {
name: 'Mittens Cat',
info: 'Tap anywhere on the card to open the modal'
}
$ionicModal.fromTemplateUrl('info-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();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
In tmeplates I have created: info-modal.html
<ion-view view-title="info modal">
<ion-content class="padding">
<div class="modal">
<ion-header-bar>
<h1 class="title">Edit Contact</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text" ng-model="contact.name">
</label>
<label class="item item-input">
<span class="input-label">Info</span>
<input type="text" ng-model="contact.info">
</label>
</div>
<button class="button button-full button-energized" ng-click="closeModal()">Done</button>
</ion-content>
</div>
</ion-content>
</ion-view>
Now I want to open model using my info button which currently directs to a page:
<button class="button button-icon icon ion-ios-information-outline" ui-sref="tab.galleryDemo1">
</button>
What i the correct way to do this?
I have looked at:
http://learn.ionicframework.com/formulas/making-modals/
But I am unsure what to do?
Any help would be greatly appreciated.
Fred