Question

我一直在关注Drop down option menu using onsen UI，但我想在点击它时取消弹出窗口。任何想法。

Answer 1

通常情况下，您可以使用popover.hide()隐藏它，但是当您尝试再次使用包含列表的弹出框的同一个控制器时（浏览器卡住并且CodePen示例被窃听）似乎存在错误）。这就是为什么你需要创建另一个控制器来隐藏popover和一个服务来共享两个控制器之间的popover（这里你可以找到working CodePen）。

＆＃13;

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.destroyPopover = 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,
  };
});

＆＃13;

之后，只需将控制器添加到新的popover.html模板中，将ng-click="destroyPopover()"指令添加到ons-list-item。这样做，每次单击列表元素时都会隐藏弹出窗口。

＆＃13;

<ons-template id="popover.html" >
  <ons-popover direction="down" cancelable >
    <ons-list ng-controller="MyController">
      <ons-list-item modifier="tappable" ng-click="hidePopover()">Option 1</ons-list-item>
      <ons-list-item modifier="tappable" ng-click="hidePopover()">Option 2</ons-list-item>
      <ons-list-item modifier="tappable" ng-click="hidePopover()">Option 3</ons-list-item>
    </ons-list>
  </ons-popover>
</ons-template>

＆＃13;

修改

还有另一种方法可以在不使用AngularJS服务的情况下隐藏弹出窗口。自Onsen UI 1.3发布以来，在使用ons.createDialog()，ons.createPopover()和ons.createAlertDialog()创建对话框和弹出窗口时，它可以通过范围。（source）。

创建对话框时，可以使用以下语法：

＆＃13;
＆＃13;
ons.createDialog('dialog.html', {parentScope: $scope}).then(function(dialog) { $scope.dialog = dialog; });
＆＃13;
＆＃13;
＆＃13;

并使用

＆＃13;
＆＃13;
<ons-list-item modifier="tappable" ng-click="popover.hide()">Option 1</ons-list-item>
＆＃13;
＆＃13;
＆＃13;

您可以找到有效的CodePen示例HERE。

如何在温泉ui中隐藏popover

1 个答案: