How to hide the popover when done

ionic-v1
#1

refer to this http://ionicframework.com/docs/v1/api/service/%24ionicPopover/

How to hide the popover, when user have selct one of the dropdown list in the popover?
I use the example in https://www.tutorialspoint.com/ionic/ionic_js_popover.htm

Currently, the popover remain open even it has open a new page

        $ionicPopover.fromTemplateUrl('popover.html', {
              scope: $scope
           }).then(function(popover) {
              $scope.popover = popover;
           });
        
           $scope.openPopover = function($event) {
              $scope.popover.show($event);
           };

           $scope.closePopover = function() {
              $scope.popover.hide();
           };

           //Cleanup the popover when we're done with it!
           $scope.$on('$destroy', function() {
              $scope.popover.remove();
           });

           // Execute action on hide popover
           $scope.$on('popover.hidden', function() {
              // Execute action
           });

           // Execute action on remove popover
           $scope.$on('popover.removed', function() {
              // Execute action
           });

Please advice

#2

On the click of any item in popover.html, do some action and call the below function that closes the popover.

$scope.popover.hide();

#3

my html is as below

<button class="button" ng-click="openPopover($event)"><i class="ion-android-more-vertical"></i></button>

<script id = "popover.html" type = "text/ng-template">
    <ion-popover-view>
      <ion-content>
        <div class="list">
          <a class="item" href="#/app/profit">
            Profit
          </a>
      
          <a class="item" href="#/app/company}">
            Company
          </a>
        </div>
      </ion-content>
    </ion-popover-view>
  </script>

where shall I place the code you mentioned? can elaborate further?

#4 
<script id = "popover.html" type = "text/ng-template">
    <ion-popover-view>
      <ion-content>
        <div class="list" ng-click="popover.hide()">
          <a class="item" href="#/app/profit">
            Profit
          </a>
      
          <a class="item" href="#/app/company}">
            Company
          </a>
        </div>
      </ion-content>
    </ion-popover-view>
  </script>
#5

The code works when it is in the html is in the templates directory.

However, if the page.html that contains popover.html is move to directory /www/page/page.html, the code is not working. js also move to /www/page/popover.js

which part of the code I need to change?

#6

Your script id should be updated to the current location

Also, updated here in templateURL

$ionicPopover.fromTemplateUrl('popover.html', {
              scope: $scope
           }).then(function(popover) {
              $scope.popover = popover;
           });
#7

updated the url but it won’t work
popover.html is a script inside page.html.

Thus there is no /www/page/popover.html.
There is only /www/page/page.html

#8

What have you used in script id and what have you used in fromTemplateURL

#9

In app.js

   .state('app.page', {
    url: '/page',
    views: {
        'menuContent': {
            templateUrl: '/all/page/page.html',
            controller: 'page'
        }
    }
})

in script which is contain inside page.html

<script id = "popover.html" type = "text/ng-template">
    <ion-popover-view>
      <ion-content>
        <div class="list" ng-click="popover.hide()">
          <a class="item" href="#/app/morepage">
            Apple
          </a>
          <a class="item" href="#/app/morepage1">
            Orange
          </a>
        </div>
      </ion-content>
    </ion-popover-view>
  </script>

Original directory path

/www/js/controllers/page.js

/www/templates/page.html

new directory path

/www/all/page/page.js

/www/all/page/page.html

original templateURL is templates/page.html but now change to /all/page/page.html and it did not work for new path