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

Question

我试图模仿这个，但使用 Onsen 2.0 而不使用 AngularJS:

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，你可以毫无麻烦地忽略它。当然，您可以以相同的方式使用弹出窗口，但没有 Controller :

var popover;

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

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

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