javascript-如何从离子选项卡中打开离子模态

我有一个用例,我想通过单击“离子”选项卡来打开离子模态.

我们的应用程序具有4个固定的离子选项卡.选项卡中的一个当前进入注释表单,但它更适合用作模式表单(因此用户可以快速完成表单并返回他们正在做的事情).

模态通常附在按钮上.我尝试使用ng-click选项卡打开模态,类似于demo,但是没有运气.

是否可以使用离子卡打开离子模式？

解决方法:

您可以在标签中添加“假”标签：

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

标签：angularjs,ionic-framework,javascript
来源： https://codeday.me/bug/20191120/2042302.html