如何通过单击设备后退按钮隐藏 Onsen Ui 中的弹出框？答案

【问题标题】：How to hide popover in Onsen Ui by clicking device back button?如何通过单击设备后退按钮隐藏 Onsen Ui 中的弹出框？
【发布时间】：2016-03-12 01:49:10
【问题描述】：

我找到了下面的例子dropdown popover hide

<ons-page>
<ons-toolbar ng-controller="DropdownController">
<div class="right">
  <ons-toolbar-button ng-click="popover.show($event);"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Dropdown test</div>
</ons-toolbar>

 <p style="text-align: center; color: #999; padding-top: 100px;">Click the    upper right button to show dropdown.</p>

 <ons-template id="popover.html" >
 <ons-popover direction="down"style="height:50px;width:65px" cancelable >
<ons-list ng-controller="MyController">
  <ons-list-item modifier="tappable" ng- click="getPerson(1);hidePopover()">Admin</ons-list-item>
  <ons-list-item modifier="tappable" ng-click="getPerson(2);hidePopover()">Seller</ons-list-item>      
</ons-list>
</ons-popover>
 </ons-template>



 var app = ons.bootstrap();

 app.controller('DropdownController', function($scope, myService) {
   ons.createPopover('popover.html').then(function(popover) {
    $scope.popover = popover;
  myService.setPopover($scope.popover);
    });
    });

   app.controller('MyController', function($scope, myService) {
    $scope.hidePopover = function() {
    $scope.popover = myService.getPopover();    
    $scope.popover.hide();
 }
 });

app.service("myService", function(){
 var sharedPopover

  var setPopover = function(pop){
   sharedPopover = pop;
 };

   var getPopover = function(){
   return sharedPopover;
 };

 return {
setPopover: setPopover,
  getPopover: getPopover,
 };
  });

当您在弹出框上方单击时，它会隐藏弹出框。我想用设备后退按钮（android）隐藏弹出框。我尝试使用ng-device-backbutton="hidePopover()"，但它不起作用。有什么建议吗？提前致谢。

【问题讨论】：

我没有温泉经验，但我会尝试在您的控制器中添加类似的东西$scope.$on("backbutton", function () { //close your popover });

标签： angularjs cordova onsen-ui

【解决方案1】：

取决于您选择实现的方式，即通过页面 API、覆盖等。此参考应该为您提供一个起点：

https://onsen.io/guide/overview.html#HandlingBackButton

这是一个例子，应该做你需要的，只知道它覆盖了这个页面的所有后退按钮功能：

myPage.getDeviceBackButtonHandler().setListener(function(event) {
  // Call hide popover function referenced in your post
  hidePopver();
});

我认为 - 虽然我没有测试过 - 如果您将弹出框设置为 cancelable，那么您将不必添加任何后退按钮功能，并且默认行为会按照您的预期工作。

编辑：可取消用于对话。可能是另一个值得考虑的选择。

【讨论】：