Как скрыть всплывающее окно в onsen ui

Я следил за выпадающим меню опций с использованием пользовательского интерфейса onsen, но я хотите отменить всплывающее окно при нажатии на него. Есть идеи.


angularjs onsen-ui
person Nakket    schedule 18.04.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Обычно вы можете просто скрыть его с помощью popover.hide(), но, похоже, возникает ошибка, когда вы пытаетесь снова использовать тот же контроллер с всплывающим окном, содержащим список (браузер зависает, а пример CodePen глючит). Вот почему вам нужно создать еще один контроллер, чтобы скрыть всплывающее окно, и сервис для совместного использования всплывающего окна между двумя контроллерами (здесь вы можете найти рабочий 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(). (источник).

При создании диалога можно использовать следующий синтаксис:

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 можно найти ЗДЕСЬ.

person Andi Pavllo    schedule 18.04.2015
comment
@Khmerbridge рад, что это помогло! пожалуйста, подумайте также о том, чтобы проголосовать за пост, чтобы сделать его более заметным в будущем. - person Andi Pavllo; 19.04.2015