如何從離子選項卡打開離子模式

Question

我有一個用例，我想通過單擊離子選項卡打開離子模式。

我們的應用程序有4個固定的ion-tabs。其中一個選項卡目前用於評論表單，但它更適合作爲模式（因此用戶可以快速完成表單並返回到他們正在執行的操作）。

Modals通常附加到按鈕上。我試圖在標籤上使用ng-click打開模式，與此demo類似，但沒有運氣。

是否可以使用ion-tab打開ion-modal？

Answer 1

您可以添加一個「假」選項卡，您的標籤：

<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> 

正如你所看到的，最後一個是空的：

<ion-tab title="D" ng-click="openMyModal()"> 
</ion-tab> 

我們單擊該選項卡（NG-點擊）它調用方法openMyModal。

因爲我還沒有該選項卡，我要使用的抽象標籤控制器定義控制器：

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

，這將是控制器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(); 
    }; 

}) 

如果你想看到它在行動檢查這個plunker。