如何在温泉中隐藏弹出窗口 ui

Question

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

Answer 1

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

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

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

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

编辑

还有另一种不使用 AngularJS 服务隐藏弹出窗口的方法。从 Onsen UI 1.3 版本开始，当使用 ons.createDialog()、ons.createPopover() 和 ons.createAlertDialog() 创建对话框和弹出窗口时，可以传递范围。 (source)。

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

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

并使用

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

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

如何在温泉中隐藏弹出窗口 ui

How to hide popover in onsen ui

angularjs

onsen-ui