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

AngularJS只需要

ons.bootstrap。如果你没有包含AngularJS，你可以毫不费力地省略它。并且你以相同的方式使用popover但当然没有控制器：

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调用而不是角度

1 个答案: