How to open an Ionic Modal from an Ionic Tab

Question

I have a use case where I'd like to open an Ionic Modal by clicking an Ion Tab.

Our app has 4 fixed ion-tabs. One of the tabs currently goes to a comment form but it would be better suited as a modal (so the user can quickly complete the form and go back to what they were doing).

Modals are normally attached to a button. I've attempted to open the modal using ng-click on the tab, similar to this demo but with no luck.

Is it possible to use an ion-tab to open a ion-modal?

I don't understand your issue. Do you agree that when opening your new tab, you start a new controller ? If yes, then add the code to open your modal directly into your new controller — aorfevre

LeftyX LeftyX · Accepted Answer · 2015-06-02T18:53:38

You can add a "fake" tab to your 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 you click to the tab (ng-click) it calls a method openMyModal.

Since I haven't defined a controller for that tab I am going to use the controller for the abstract tabs:

.state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'tabs.html',
    controller: 'TabsController'
})

and this would be the controller 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 this plunker.

How to open an Ionic Modal from an Ionic Tab

1 Answers