如何隐藏温泉UI酥料饼 [英] How to hide popover in onsen ui

问题描述

我一直在关注使用温泉UI 下拉菜单选项，但我想它攻丝时取消酥料饼。任何想法。

解决方案

通常，你可以只是隐藏popover.hide（），但它似乎有一个当您尝试使用包含列表酥料饼再次使用相同的控制器错误（浏览器卡和codePEN样品得到窃听）。这就是为什么你需要创建另一个控制器隐藏酥料饼和一个服务共享的两个控制器（之间的酥料饼在这里你可以找到的工作codePEN ）。

\r

\r

VAR应用= ons.bootstrap（）;\r
\r
app.controller（'的DropDownController'，函数（$范围，为myService）{\r
  ons.createPopover（'popover.html'），然后（功能（酥料饼）{\r
    $ scope.popover =酥料饼;\r
    myService.setPopover（$ scope.popover）;\r
  }）;\r
}）;\r
\r
app.controller（'myController的'，函数（$范围，为myService）{\r
  $ scope.destroyPopover =功能（）{\r
    $ scope.popover = myService.getPopover（）;\r
    $ scope.popover.hide（）;\r
  }\r
}）;\r
\r
app.service（为myService功能（）{\r
  VAR sharedPopover\r
  \r
  VAR setPopover =功能（POP）{\r
    sharedPopover =流行;\r
  };\r
  \r
  VAR getPopover =功能（）{\r
    返回sharedPopover;\r
  };\r
  \r
  返回{\r
    setPopover：setPopover，\r
    getPopover：getPopover，\r
  };\r
}）;

\r

\r

\r

后，只需添加控制器在新的 popover.html 模板和 NG-点击=destroyPopover（）指令到附件列表项。这样做的酥料饼会被你点击列表元素每次隐藏的。

\r

\r

＆LT; ONS-模板ID =popover.html＆GT;\r
  ＆LT; ONS-酥料饼的方向=向下取消＆GT;\r
    ＆LT;附件列表NG控制器=myController的＆GT;\r
      ＆LT;附件列表项修改=tappableNG点击=hidePopover（）＆GT;选项1＆LT; /附件清单项目＆GT;\r
      ＆LT;附件列表项修改=tappableNG点击=hidePopover（）＆GT;选项2'; /附件清单项目＆GT;\r
      ＆LT;附件列表项修改=tappableNG点击=hidePopover（）＆GT;选项3'; /附件清单项目＆GT;\r
    ＆LT; / ONS-列表＆gt;\r
  ＆LT; / ONS-酥料饼＆GT;\r
＆LT; /插件模板＆GT;

\r

\r

\r

修改

有另一种方式来隐藏酥料饼不使用AngularJS服务。
由于温泉UI 1.3版本有可能通过余地对话和酥料饼，用 ons.createDialog（）创建它们时， ons.createPopover（）和 ons.createAlertDialog（）。 （源）。

在创建对话框下面的语法，可以用：

\r

\r

ons.createDialog（'dialog.html'，{parentScope：$范围}） 。然后（功能（对话）{\r
  $ scope.dialog =对话框;\r
}）;

\r

\r

\r

和使用

\r

\r

＆LT;附件列表项修改=tappableNG点击= popover.hide（）＆GT;选项1＆LT; /附件清单项目＆GT;

\r

\r

\r

您可以找到一个工作codePEN例如这里。

I have been following Drop down option menu using onsen UI, but I want to cancel the popover when tapping on it. Any idea.

解决方案

Usually, you can just hide it with popover.hide(), but it seems there is a bug when you try to use again the same controller with a popover containing a list (the browser gets stuck and the CodePen sample get bugged). That's why you need to create another controller to hide the popover and a service to share the popover between the two controllers (Here you can find a 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,
  };
});

After, just add the controller in the new popover.html template, and the ng-click="destroyPopover()" directive to the ons-list-item. Doing that, the popover will be hidden every time you click the list element.

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

EDIT

There is another way to hide the popover without using an AngularJS Service. Since Onsen UI 1.3 release it's possible to pass scope for dialogs and popover, when creating them with ons.createDialog(), ons.createPopover() and ons.createAlertDialog(). (source).

When creating a dialog the following syntax can be used:

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

and use

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

You can find a working CodePen example HERE.

这篇关于如何隐藏温泉UI酥料饼的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！