2016-01-25 2 views
1

Я пытаюсь имитировать это, но с помощью Onsen 2.0 без AngularJS:дополнения-поповер 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> 
+0

Спасибо Fran Dios! Это сработало чудеса. Не могу поверить, что я пропустил это. Doh! – Munsterlander

ответ

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