Ionic v1 global $ionicPopover menu

Question

for my ionic v1 app I need to add one header menu (like as bootstrap menu) in right corner. When I click this button, i need to show menu with same ng-click event. For graphical requirement I need a menu and no side menu. Found $ionicPopover, and I think that is my solution. My problem is about menu function. My idea is use a html template for all menu, and put popover function samewhere accessibile for all my app. Is possibile? Found only example where for every controller I need to implement popover function. For example this is a simple controller. I need to define popover function globally for all my project. Same for popover definition. Is possible? Thanks.

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
   // .fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $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
   });
})

Do you hava a single view-template for every page? Normally you would have some sort of root-template that wraps all your ui-router views. This root-template would be the appropriate place fot such an popup-menu. — Sebastian, Jun 16 '17 at 07:50
Page have differente layout. I need to add a common header for all and put in it the menu. Thanks — Andrea Merlin, Jun 16 '17 at 08:51

score 0 · Answer 1 · answered Jun 16 '17 at 08:05

Like stated in my comment, you should create a root-template view with a separate Controller that holds the logic shared by all views. Take the following setup as an example:

The "Root Template": (Contains the Menu Button)

<!-- templates/root.html -->
<div>
    <ion-nav-bar class="bar-positive">
         <ion-nav-buttons side="right">
            <button class="button icon ion-android-more-vertical" ng-click="showMenu($event)"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="content"></ion-nav-view>
</div>

Dash Templates:

<!-- views/dash.html -->
<ion-view view-title="Dash View">
    <ion-content>
        Hello World!
    </ion-content>
</ion-view>

The states:

$stateProvider
    .state('root', {
        url: '/root',
        abstract: true,
        templateUrl: 'templates/root.html',
        controller: 'RootCtrl'
    })

    .state('root.dash', {
        url: '/sub',
        views: {
            'content': {
                controller: 'DashCtrl',
                templateUrl: 'views/dash.html'
            }
        }
    })

In the DashCtrl you will put your logic to handdle the popup. Thus this controller has to implement the showMenu($event) function.

If you really need a template for your popover, you can define the template in either in the html of templates/root.html or in the code of **RootController.js".

Yes. Now I have it. But what I need is a single point where implemente showMenu($event) function. In this case if I have 3 controller, i need to implement this function for single controller. Thanks. — Andrea Merlin, Jun 16 '17 at 08:54

score 0 · Accepted Answer · answered Jun 20 '17 at 08:25

0

Finally, I create single function in single controller, with a common menu header. Thanks.

answered Jun 20 '17 at 08:25

Andrea Merlin

109
2
12

score 0 · Answer 3 · answered Sep 12 '20 at 16:31

I know the OP resolved his issue but did it in a different way than was originally asked. The OQ was how to do a global popover...the accepted answer was to do controller view instead.

But to do a global popover, this is how I did it. I am certain some might object to this because of the dependency of $rootScope but it is a working solution:

In app.js:

  var popoverPromise = $ionicPopover.fromTemplateUrl('templates/windowPopup.html', {
    scope: $rootScope,
    focusFirstInput:false
  });
  popoverPromise.then(function(popover) {
    $rootScope.msgPopover = popover;
  });
  
  $rootScope.globalPopover = function(tpt,tps,tpm,tps1,tpm1,tpa,tpc) {
    popoverPromise.then(function(popover) {
      $rootScope.popInfo.title = tpt ;
      $rootScope.popInfo.sub = tps ;
      $rootScope.popInfo.msg = tpm ;
      $rootScope.popInfo.sub1 = tps1;
      $rootScope.popInfo.msg1 = tpm1 ;
      $rootScope.popInfo.action = tpa ;
      $rootScope.popInfo.color1 = tpc ;
      $popover.show();
    }) ;
  }
  $rootScope.globalClosePopover = function() {
    $rootScope.msgPopover.hide();
  }

And then from all the various controllers where you need it, inject $rootScope: $rootScope.globalPopover(a,b,c,d,e,f,g) ;

An alternative to the above, if you don't need it everywhere - like in your app in init/register/startup controllers, is to put all this in your Tabs-Controller.

Ionic v1 global $ionicPopover menu

3 Answers3