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>

怎么做？

谢谢， Sabarisri

Answer 1

创建一个分享按钮：

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

将你的popover模板放在这样：

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

你的控制器中的

会像这样调用popover：

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

在离子框架中的弹出

1 个答案: