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

242 Views Asked by At

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> 
1

There are 1 best solutions below

0
On BEST ANSWER

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