Ionic popover not closing automatically

ionic-v1
1

Hi, I am currently working for android application. I am using ionic pop over which displays my menu like below

On select of any item on pop up my popover should close automatically. Currently I need to tap some where to close the pop up. Can some one help me how to do this? I really need this.

Below is my code.

view.html

<ion-view hide-back-button="false" title="Test Popover" ng-controller="homeCtrl as vm">
    <ion-nav-bar class="bar-positive" animation="no-animation" align-title="left">
        <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-buttons side="right">       
        <a class="button button-icon ion-gear-b" ng-click="vm.popover.show($event)"></a>
    </ion-nav-buttons>
    <ion-content>
        <div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label">Version</span>
                <div class="item-text-wrap">{{vm.version}}</div>
            </label>
            <label class="item item-input item-stacked-label">
                <div class="input-label">Date </div>
                <div calss="item-text-wrap">{{vm.buildDate | date:'MMMM dd yyyy'}}</div>
            </label>
        </div>
    </ion-content>
</ion-view>

popover.html

<ion-popover-view class="custom-popup">
    <ion-content>
        <div class="list positive" style="border-bottom-width:2px;border-color:lightgray">
            <a class="item ion-gear-b">
                Settings
            </a>
            <a class="item ion-speakerphone">
                Feedback
            </a>
        </div>
    </ion-content>
</ion-popover-view>

controller.js

(function () {
    'use strict';

    var controllerId = 'homeCtrl';
    angular.module('claimsApp').controller(controllerId, ['$scope','$ionicPopover', homeCtrl]);

    function homeCtrl($scope,$ionicPopover) {
        /* jshint validthis: true */
        var vm = this;

        // globals defined in globals.js script file
        vm.buildDate = new Date();
        vm.version = '1.4';
        vm.popover = null;

        activate();

        function activate() {
            $ionicPopover.fromTemplateUrl('templates/popover.html', {
                scope: $scope,
            }).then(function (popover) {
                vm.popover = popover;
            });
        }
    }
})();

image

2

This works for me

<div class="list">
        <a ng-click="getValue('avail')" class="item ion-checkmark-circled" translate="status_available">
            Available
        </a>
       ...
    </div>

then in parent controller.js

$scope.getValue = function (status) {
    console.log('clicked on:' + status);
    $scope.closePopover();
}
1 Like
3

you can hide the popover menu by using hide() method in the template, just like this:

<ion-popover-view>
  <ion-content>
  <!-- here is the magic -->
  <div class="list" ng-click="popover.hide()">
    <a class="item" href="#/">menu_01</a>
    <a class="item" href="#/">menu_02</a>
    <a class="item" href="#/">menu_03</a>
  </div>
  </ion-content>
</ion-popover-view>

but the first thing you should do is pass the popover instance to $scope in the controller, like this:

  $ionicPopover.fromTemplateUrl('tpl/common/parts/popover.plus.html', {
    scope: $scope,
  }).then(function(popover) {
    $scope.popover = popover;
  });

hope this can help. ^-^

3 Likes
4

@beetaa, thanks for taking time in this.

I followed exactly the same what you suggested. It is working fine on the simulator as well as plunk. But it is not working on my device (Samsung S5) any idea?

Here is plunk i created. Click on grid icon on home screen. You should see popover.

Can you help me fix this issue?

5

@mrvamsidhar , you’re welcome.

because of the demo works fine in plunk, and I have not get the real S5 device on hand, so it’s hard to test and reproduce the issue. but I notice that you’ve missed the cordova.js in the index.html. this file is required for building the real APP.

as ionic’s guide says, you can add this file in index.html’s header like this:

<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>

FYI, you can have look at the ionic guide

6

Thanks for your reply.
I created a sample application with same and it is working as expected even in device. It looks like some thing went wrong in my project structure. We are over-riding couple of things in css. and also using gulp to generate a single CSS file. Looks like I need to verify those.

7

@beetaa, a quick question.
In my app i need two popovers in myscreen

I am doing like below Do you think is it correct approach.What is happening is always first popover is working but not second.

$ionicPopover.fromTemplateUrl('app/layout/popovermenu.html', {
                scope: $scope,
            }).then(function (popover) {
                $scope.popover = popover;
            });
 $ionicPopover.fromTemplateUrl('app/layout/popovermenuShop.html', {
                scope: $scope,
            }).then(function (popover) {
                $scope.popoverShop = popover;
            });

popovermenu.html

<ion-popover-view class="custom-popup">
    <ion-content>
        <div class="list positive" ng-click="popover.hide()">
            <a class="item ion-gear-b" href="#/app/settings">
                Settings
            </a>
            <a class="item ion-speakerphone" href="#/app/feedback">
                Feedback
            </a>
        </div>
    </ion-content>
</ion-popover-view>

popovermenuShop.html

<ion-popover-view class="custom-popup" ng-click="popoverShop.hide()">
    <ion-content>
        <div class="list positive">
            <a class="item ion-gear-b" href="#/app/settings">
                Appointments
            </a>
            <a class="item ion-speakerphone" href="#/app/arxrepairlist">
                Repairs
            </a>
        </div>
    </ion-content>
</ion-popover-view>
8

@mrvamsidhar , I think ng-click="popover.hide()" should stay in directive <div class="list positive">，not in ion-popover-view.

or you should check the difference of popovermenu.html and popovermenuShop.html.

9

@beetaa, yes. my mistake it was typo error. I fixed now. But I am still having issue when trying to load second popover. App is freezing at that time. I am trying to do a sample project.

My question is, is it okay to load two popovers on the same screen?

10

Hello
I have also need two popovers on different pages.
I have faced some problem with popover. when open propover and any Item selected In popover and located another page through popover. it’s not close automatically on other page when it located .
how to used two popover …?
how to close automatically close when any other page located ?

11

Hi I’m leaving answer in case someone else needs, I solved it like this

    <li class="item" ng-repeat="city in cities" ng-click="citiesClick(city.label)">

then inside my controller is:

 /**
 * Loads the ionicPopover with content from doctors.html/popoverCities.html
 *  then passes the popover instance to $scope in the controller
 */
$ionicPopover.fromTemplateUrl('popoverCities.html', {
  scope: $scope

}).then(function (popover) {
  $scope.citiesPopover = popover;
});


//now notice in citiesClick after all is done closes the citiesPopover.hide()
$scope.citiesClick = function (city) {
  $scope.city = city;
  $scope.citiesLabel = $scope.city.name;
  $scope.cityId = $scope.city.label; 

  $scope.citiesPopover.hide(); //THIS IS THE IMPORTANT PART

}
12

Having the same problem, the popup does not close when I switch view. Tried all the examples above but did not work. I managed to get it to work by using a function in the navigation while also going to a new view. Might or might not be the ideal way but it works. cheers.

//open the popup

//add the close function to one of the popup navigation links
Account

//controller
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};

13

Add. Close() method.

14

inside your popover view, just add a popover.hide() inside the list. Check my code sample