Скрыть popover in onsen ui

Итак, прежде чем кто-то скачет на меня и кричит, что для этого уже есть решение, извините, но это не работает для меня. Я посмотрел и попробовал оба варианта, предложенные ниже, без каких-либо успехов. How to hide popover in onsen ui Скрыть popover in onsen ui

Я действительно не понимаю, почему, поскольку мой код почти идентичен примерам. Я использую скользящее меню на странице, но это в значительной степени.

Вот мой index.html

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<script src="components/loader.js"></script> 

<link rel="stylesheet" href="components/loader.css"> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" href="css/sliding_menu.css"> 
<script> 

    var app = ons.bootstrap('propertyDeal', ['onsen']); 
    app.controller('AppController', function($scope, myService) { 
     ons.createPopover('popover.html',{parentScope: $scope}).then(function(popover) { 
      $scope.popover = popover; 
      myService.setPopover($scope.popover); 
     }); 
    }) 
    app.controller('HydePController', 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, 
     }; 
    }); 
</script> 
</head> 
<body> 
<ons-sliding-menu main-page="initial.html" menu-page="menu.html" max-slide-distance="260px" type="overlay" var="menu" side="left" close-on-tap> 
</ons-sliding-menu> 
<ons-template id="popover.html"> 
    <ons-popover direction="down" cancelable> 
      <ons-list ng-controller="HydePController"> 
       <ons-list-item modifier="tappable" ng-click="menu.setMainPage('save.html', {closeMenu: true}); popover.hide()"> 
        <ons-icon icon="fa-cloud"></ons-icon> 
        Save property 
       </ons-list-item> 
       <ons-list-item modifier="tappable" ng-click="hydepopover()"> 
        <ons-icon icon="fa-home"></ons-icon> 
        View portfolio 
       </ons-list-item> 
      </ons-list> 
    </ons-popover> 

</ons-template> 

</body>

И initial.html

<ons-navigator> 
<ons-page> 
    <ons-toolbar> 
     <div class="left"> 
     <ons-toolbar-button ng-click="menu.toggleMenu()"> 
      <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> 
     </ons-toolbar-button> 
     <ons-icon class="icon" icon="ion-social-usd"></ons-icon>&nbsp;Initial investment 
     </div> 
     <div class="right"> 
     <ons-toolbar-button ng-click="menu.toggleMenu()"> 
      <ons-icon icon="ion-android-share" fixed-width="false"></ons-icon> 
     </ons-toolbar-button> 
      <ons-toolbar-button ng-controller="AppController" id="android-more" ng-click="popover.show($event);"> 
       <ons-icon icon="ion-android-more" fixed-width="false"></ons-icon> 
      </ons-toolbar-button> 
     </div> 
    </ons-toolbar> 

    <div style="text-align: center"> 
     <h2>Initial investment</h2> 

     <ul class="list"> 
      <li class="list__item"> 
       <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Purchase price"> 
      </li> 
      <li class="list__item"> 
       <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Market value"> 
      </li> 
      <li class="list__item"> 
       <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Stamp duty"> 
      </li> 
      <li class="list__item"> 
       <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Sourcing fee"> 
      </li> 
      <li class="list__item"> 
       <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Legal fee"> 
      </li> 
      <li class="list__item"> 
       <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Other"> 
      </li> 
     </ul> 
    </div> 

     </ul> 
    </div> 

</ons-page> 
</ons-navigator>

Так как было сказано выше, я попробовал оба решения и не повезло. Я не понимаю, почему. У меня также есть скользящее меню, которое не закрывается при нажатии за пределами меню. Может ли это быть связано?

Благодарим за помощь! Arnaud

источник

2015-10-30 nocrack

Код, который вы указали, прекрасен, за исключением одной небольшой ошибки. Вы не должны добавлять контроллер на ons-toolbar-button, потому что он сломает кнопку.

Просто добавьте контроллер на родительский элемент (в initial.html), с:

<div class="right"> 
 
    <ons-toolbar-button ng-click="menu.toggleMenu()"> 
 
     <ons-icon icon="ion-android-share" fixed-width="false"></ons-icon> 
 
    </ons-toolbar-button> 
 
    <ons-toolbar-button ng-controller="AppController" id="android-more" ng-click="popover.show($event);"> 
 
     <ons-icon icon="ion-android-more" fixed-width="false"></ons-icon> 
 
    </ons-toolbar-button> 
 
</div>

к этому:

<div class="right" ng-controller="AppController" > 
    <ons-toolbar-button ng-click="menu.toggleMenu()"> 
     <ons-icon icon="ion-android-share" fixed-width="false"></ons-icon> 
    </ons-toolbar-button> 
    <ons-toolbar-button id="android-more" ng-click="popover.show($event);"> 
     <ons-icon icon="ion-android-more" fixed-width="false"></ons-icon> 
    </ons-toolbar-button> 
</div>

Вы можете найти работу Пример CodePen HERE.

Что касается sliding-menu, кажется, что это нормально.

источник

2015-10-30 17:32:37

Спасибо Andi, Он все еще не закрыт. Даже на примере вашего кода, если я нажму на одну из двух кнопок в меню, он по-прежнему не закрывает popover. Я пробовал на Android и на ПК с firefox и хром. – nocrack

Теперь это решение. Я действительно думал о том, почему это не работает, и почему у скользящего меню была аналогичная проблема. Оказывается, я использовал onsenui 1.2.2, и теперь я обновлен до 1.3.4, и все работает так, как ожидалось. Благодарю вас за вашу помощь. – nocrack

@nocrack добро пожаловать! Пожалуйста, подумайте о том, чтобы обновить до 1.3.11, так как он исправляет множество ошибок и повышает мой ответ, если вы считаете это полезным :) –

Скрыть popover in onsen ui

ответ

Смежные вопросы