How to open an Ionic modal from the Ionic tab
I have a use case where I would like to open the Ionic Modal by clicking the Ion tab.
Our application has 4 fixed ion-tabs
. One of the tabs currently belongs to the comment form, but it is better suited as a modal one (so the user can quickly fill out the form and return to what they are doing).
Modals are usually attached to a button. I tried to open modal using ng-click
a tab similar to this demo , but no luck.
Can a be used ion-tab
to open ion-modal
?
source to share
You can add a "fake" tab on the tabs:
<ion-tabs class="tabs-royal tabs-striped">
<ion-tab title="A" href="#/tab/a">
<ion-nav-view name="a-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="B" href="#/tab/b">
<ion-nav-view name="b-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="C" href="#/tab/c">
<ion-nav-view name="c-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="D" ng-click="openMyModal()">
</ion-tab>
</ion-tabs>
As you can see, the last one is empty:
<ion-tab title="D" ng-click="openMyModal()">
</ion-tab>
We click on the tab (ng-click), it calls the method openMyModal
.
Since I haven't defined a controller for this tab, I'm going to use a controller for abstract tabs:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'tabs.html',
controller: 'TabsController'
})
and this will be the TabsController:
.controller('TabsController', function($scope, $ionicModal){
$scope.modal = null;
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openMyModal = function()
{
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
})
If you want to see it in action, check out this plunker .
source to share