I am trying to mimic this but using Onsen 2.0 without 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;
});
});
In short, how can you trigger a popover in JS and not use the ons.bootstrap() as this will result in an error due to AngularJS not being included?
My page calling looks like:
<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>
ons.bootstrap
is only needed for AngularJS. If you don't include AngularJS you can omit it without troubles. And you use the popover in the same way but without controllers, of course:
var popover;
ons.createPopover('popover.html').then(function(element) {
popover = element;
});
function show(id) {
popover.show(id);
};
Check it here: http://codepen.io/frankdiox/pen/LGQwVM