ons-popover 2.0 - 通过纯 javascript 而不是 angular 调用答案

【问题标题】：ons-popover 2.0 - invoke via pure javascript and not angularons-popover 2.0 - 通过纯 javascript 而不是 angular 调用
【发布时间】：2016-01-25 04:31:28
【问题描述】：

我试图模仿这一点，但在没有 AngularJS 的情况下使用 Onsen 2.0：

http://codepen.io/argelius/pen/zxGEza?editors=1010

var app = ons.bootstrap();

app.controller('DropdownController', function($scope) {
  ons.createPopover('popover.html').then(function(popover) {
    $scope.popover = popover;
  });
});

简而言之，如何在 JS 中触发弹出框而不使用 ons.bootstrap()，因为这会由于未包含 AngularJS 而导致错误？

我的页面调用如下：

<div class="right">
   <ons-toolbar-button onclick="????">
   <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
   </ons-toolbar-button>
</div>

<ons-template id="popover.html">
      <ons-popover direction="down" cancelable>
        <ons-list>
          <ons-list-item modifier="tappable">Option 1</ons-list-item>
          <ons-list-item modifier="tappable">Option 2</ons-list-item>
          <ons-list-item modifier="tappable">Option 3</ons-list-item>
        </ons-list>
      </ons-popover>
    </ons-template>

【问题讨论】：

谢谢弗兰迪奥斯！这创造了奇迹。不敢相信我错过了。哇！

标签： javascript angularjs onsen-ui monaca onsen-ui2

【解决方案1】：

ons.bootstrap 仅适用于 AngularJS。如果您不包含 AngularJS，您可以轻松省略它。当然，您以相同的方式使用弹出框，但没有控制器：

var popover;

ons.createPopover('popover.html').then(function(element) {
  popover = element;
});

function show(id) {
  popover.show(id);
};

在这里查看：http://codepen.io/frankdiox/pen/LGQwVM

【讨论】：