如何从离子标签打开离子模态 [英] How to open an Ionic Modal from an Ionic Tab
问题描述
我有一个用例,我想通过单击Ion选项卡打开Ionic Modal。
I have a use case where I'd like to open an Ionic Modal by clicking an Ion Tab.
我们的应用程序有4个固定的 ion-tabs
。其中一个选项卡目前转到评论表单,但它更适合作为模态(因此用户可以快速完成表单并返回到他们正在做的事情)。
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).
模态通常附加在按钮上。我试图在选项卡上使用 ng-click
打开模态,类似于演示但没有运气。
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.
是否可以使用 ion-tab
打开离子模式
?
推荐答案
您可以在标签中添加假标签:
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>
我们点击选项卡(ng-click)它调用方法 openMyModal
。
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'
})
这将是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();
};
})
如果你想在行动中看到它k这个 plunker 。
If you want to see it in action check this plunker.
这篇关于如何从离子标签打开离子模态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!