Popover in side menu - how to stop side menu close

ionic-v1
1

I’d like to display popover inside the side menu component. Unfortunately calling the show() method of the $ionicPopover casues the side menu is closed. This has nothing to do with the menu-close directive in the menu. Is there a way to prevent this action of closing and show the popover over the menu?

2

I have the problem too. When calling the model, the side menu will be also closed.Is there anyone have a solution?

3

I have the same issue!!! Has anyone solved the problem??

4

This happens when you use the “expose-aside-when” directive.

I submitted a pull request to ionic to fix this. Not sure when or if it will be merged, but In the meantime, I made this custom directive you can add to your project and use it instead of “expose-aside-when”. Your attribute will instead be “show-aside-when”. No other changes are necessary.

angular.module('you module name here').directive('showAsideWhen', ['$window', function($window) { 
      return {
        restrict: 'A',
        require: '^ionSideMenus',
        link: function($scope, $element, $attr, sideMenuCtrl) {
    
          // Setup a match media query listener that triggers a ui change only when a change
          // in media matching status occurs
          var mq = $attr.exposeAsideWhen == 'large' ? '(min-width:768px)' : $attr.showAsideWhen;
          var mql = $window.matchMedia(mq);
          mql.addListener(function (mql) {
            onResize();
          })
    
          function checkAsideExpose() {
            var mq = $attr.exposeAsideWhen == 'large' ? '(min-width:768px)' : $attr.showAsideWhen;
            sideMenuCtrl.exposeAside($window.matchMedia(mq).matches);
            sideMenuCtrl.activeAsideResizing(false);
          }
    
          function onResize() {
            sideMenuCtrl.activeAsideResizing(true);
            debouncedCheck();
          }
    
          var debouncedCheck = ionic.debounce(function() {
            $scope.$apply(checkAsideExpose);
          }, 300, false);
    
          $scope.$evalAsync(checkAsideExpose);
        }
      };
    }]);
1 Like