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

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

ons-popover 2.0 - invoke via pure javascript and not angular

javascript

angularjs

onsen-ui

monaca

onsen-ui2