离子框架中的弹出框

Question

我正在尝试在我的离子视图中创建一个弹出窗口。

<div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
        <i class="icon ion-thumbsup"></i> Like
    </a>
    <a class="tab-item" href="#">
        <i class="icon ion-chatbox"></i> Comment
    </a>
    <a class="tab-item">
        <i class="icon ion-share"></i> Share
    </a>
</div>

当我点击分享按钮时，我应该得到下面的模板作为弹出窗口。而不是单独的视图。

<div class="popover-mask"></div>
<div class="popover popover--down" style="top: 20px; left: 165px;">
    <div class="popover__top-arrow"></div>
    <div class="popover__content">
        <ul class="list">
            <li class="item">Facebook
            </li>
            <li class="item">Twitter
            </li>
        </ul>
    </div>
</div>

怎么做？

谢谢，萨巴里斯里

Answer 1

创建分享按钮：

<div class="buttons">
    <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</div>

像这样放置弹出框模板：

<script id="templates/popover.html" type="text/ng-template">
  <ion-popover-view>
    <ion-content>
       <div class="popover-mask"></div>
         <div class="popover popover--down" style="top: 20px; left: 165px;">
         <div class="popover__top-arrow"></div>
         <div class="popover__content">
         <ul class="list">
            <li class="item">Facebook
            </li>
            <li class="item">Twitter
            </li>
         </ul>
       </div>
     </div>
    </ion-content>
  </ion-popover-view>
</script>

在你的控制器中这样调用弹出窗口：

$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
   $scope.popover = popover;
});

离子框架中的弹出框

Popover in ionic framework

popover

ionic-framework

ionic-view