Global Popover across tabs

ionic-v1
1

Hi guys,

I’m firing a popover on click in an ion-nav-bar. For the content, I have a ion-tabs with three tabs. Is there a way to put the code in a global scope for the button click, to fire the popover without copying and pasting the same code across the three controllers for each tab?

Thanks in advance,
Vicente

2

I have the same question.

Any ideas?

3

I can think of various ways (assuming I understood your question correctly):

a) You could put that code into a service and invoke a service method in all your tabs
b) If your tabs are in the same template file, you could just create a common function in the controller for that template and just call that function in all your tabs
c) You could make a new controller (lets assume its called myController) for the common code, make sure it is included in <script src> and then wrap sections where you need it with <div ng-controller="myController"></div>

4

I ran into the same issue.

I put all the $ionicPopover code into 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) {
      // template variables
      $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:
$rootScope.globalPopover(a,b,c,d,e,f,g) ;