离子框架中的弹出框答案

【问题标题】：Popover in ionic framework离子框架中的弹出框
【发布时间】：2015-11-18 14:36:10
【问题描述】：

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

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

怎么做？

谢谢，萨巴里斯里

【问题讨论】：

标签： ionic-framework popover ionic-view

【解决方案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;
});

【讨论】：