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

Question

我试图模仿这一点，但使用没有 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> 

Answer 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