javascript - 如何从 Ionic 选项卡打开 Ionic Modal

Question

我有一个用例，我想通过单击 Ion Tab 打开 Ionic Modal。

我们的应用有 4 个固定的 ion-tabs。其中一个选项卡目前转到评论表单，但它更适合作为模态(这样用户可以快速完成表单并返回到他们正在做的事情)。

模态框通常附加到按钮上。我试图在选项卡上使用 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-click) 它调用方法 openMyModal。

因为我没有为该选项卡定义 Controller ，所以我将使用抽象选项卡的 Controller :

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

这将是 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();
  }; 

}) 

如果您想实际查看它，请查看此 plunker .