Question

Popover显示有两个列表项Admin和Seller。我希望在用户点击特定列表项时隐藏popover。

 My code is :-
 <ons-template id="drpdwnPopUp.html">
 <ons-popover direction="down" id="popover" style="height:50px;width:65px" cancelable>
<ons-list >
<ons-list-item modifier="tappable" onclick="getPerson(1);">
Admin
</ons-list-item>
 <ons-list-item modifier="tappable" onclick="getPerson(2);">
Seller
</ons-list-item >
</ons-list>

Answer 1

通常情况下，您可以使用popover.hide()隐藏它，但是当您尝试再次使用包含列表的弹出框的同一个控制器时（浏览器卡住并且CodePen示例被窃听）似乎存在错误）。这就是为什么你需要创建另一个控制器来隐藏popover和一个服务来共享两个控制器之间的popover（这里你可以找到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()"（非onclick）指令添加到ons-list-item。这样做，每次单击列表元素时都会隐藏弹出窗口。

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

修改

还有另一种方法可以在不使用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="getPerson(1);popover.hide()">Option 1</ons-list-item>

如何通过点击弹出窗口隐藏温泉Ui中的popover？

1 个答案: