Run code/event once ionicPopup has finished loading?

Question

I have an $ionicPopup that has some interactive content in it - however, in order to use it I must initalise it with a simple command:

myFactory.initialise(myElement)

Is there a way I can tell if the popup has loaded so I can trigger this initialisation?
Is there some sort of ionicPopupLoaded event?

For example:

var customPopup = $ionicPopup.show({
  title: 'Interactive Popup',
  cssClass: 'interactive-popup',
  template: '<div id="myElement"></div>',
  scope: $scope,
  buttons: [{
    text: 'Cancel',
    type: 'button-default',
    onTap: function(e) {
      return false;
    }
  },
  {
    text: 'Option',
    type: 'button-energized',
    onTap: function(e) {
      e.preventDefault();
      myFactory.functionA();
    }
  },
  {
    text: 'OK',
    type: 'button-balanced',
    onTap: function(e) {
      e.preventDefault();
      myFactory.functionB();
    }
  }]
});

This is my popup, once it's loaded and displayed I want to automatically call myFactory.initialise(myElement) to initialise my content..

Is there some way of running code once the popup has been loaded?

Answer 1

Looking at the $ionicPopup source code there doesn't seem to be any in built way to hook into some sort of loaded process or event. Personally I would just create my own popup service, but if you must use their objects, it looks like the only option is to leverage the template you can pass to the show() function.

This leaves you with a couple of options. The first is to use ng-init to launch a different scope function, although this is considered bad practice. For example:

template: '<div ng-init="popupLoaded()"></div>'

To implement a more angular appropriate way, use ng-controller inside your template to create a child controller for your template body. Then you can call whatever you want from inside this controller. For example:

template: '<div class="my-popup-content" ng-controller="MyPopupChildCtrl"></div>'