如何通过单击设备后退按钮隐藏温泉Ui中的popover?

时间:2016-03-11 10:19:45

标签: angularjs cordova onsen-ui

我找到了以下示例dropdown popover hide

#import <objc/runtime.h>


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    customCell *cell = (customCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    [cell.btnEdit addTarget:self action:@selector(editBtnClick:) forControlEvents:UIControlEventTouchUpInside];

    objc_setAssociatedObject(cell.btnEdit, @"idxPath", indexPath, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    if(tableView == table_1)
    {
        cell.btnEdit.tag = 1;
    }
    else
    {
        cell.btnEdit.tag = 2;
    }
    return cell;
}
- (void)editBtnClick:(UIButton *)sender
{
    NSIndexPath *indexPath = objc_getAssociatedObject(sender, @"idxPath");
    if (sender.tag == 1)
    {
        //handle first table view edit button event
    }
    else
    {
        //handle second table view edit button event
    }
}

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

当您在其上方单击时,它会隐藏弹出窗口。我想用设备后退按钮(android)隐藏popover。我试图使用 <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, }; }); 但它没有用。任何sugestions?提前谢谢。

1 个答案:

答案 0 :(得分:0)

根据您选择实施的方式,即通过页面API,覆盖等,此引用应为您提供一个起点:

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

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

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

我认为 - 虽然我没有测试过 - 如果你将popover设置为cancelable,那么你将不必添加任何后退按钮功能,它将按默认行为打算工作。

编辑:可取消用于对话。可能是另一个需要考虑的选择。