$ionicPopup inside a factory


#1

HI. I am trying to create an ionic popup $ionicPopup.show() inside a factory. I want to extract it inside a factory, because I want to use it inside multiple controllers and I want to keep my code DRY.
In my popup template I have two inputs, so I have to pass the scope parameter to the popup. The problem here is that if I pass an object other than $scope to the scope parameter I get an error and $scope cannot be resolved in a factory.

 function showPopup() {
    return $ionicPopup.show({
        templateUrl: 'app/templates/joinTrip.html',
        title: 'Join a trip',
        subTitle: 'Please populate the form',
        scope: tripData,
        buttons: [
            {
                text: 'Cancel',
                type: 'button-assertive'
            },
          {
              text: '<b>Save</b>',
              type: 'button-positive',
              onTap: function (e) {
                  return tripData.signupData;
              }
          }
        ]
    });
}

Is there a way to resolve this?


#2

I think i need this too, because i want to make ionicPopup avaiable for each state of my view :smile:


#3

well there is a better way:
create a base controller and inject it into your controller.

https://maslow.snipt.net/angularjs-controller-inheritance-45545239/


#4

The controllers in which I want to use the popup are third layer controllers (have two parent) e.g. app.search.result. I use ui-router to do this, so I think that I can add the functions in one of the parent controllers.
I found a way to do this in a factory. I pass the $scope as a parameter of a function in a factory.

  app.factory("popupFactory", ["$ionicPopup", function($ionicPopup) {

    return {
    showPopup: showPopup
    };

function showPopup(scope) {
    return $ionicPopup.show({
        templateUrl: 'app/templates/joinTrip.html',
        title: 'Join a trip',
        subTitle: 'Please populate the form',
        scope: scope,
        buttons: [
            {
                text: 'Cancel',
                type: 'button-assertive'
            },
          {
              text: '<b>Save</b>',
              type: 'button-positive',
              onTap: function (e) {
                  return scope.signupData;
              }
          }
        ]
    });
}

    } ]);

#5

@istoyanov any complete code with your controller to call it? maybe codepen :smile:
thanks


#6

Something like this.
Sample


#7

Thanks a lot, really appreciated :slight_smile:


#8

Instead of sending $scope as a parameter, you could just create a scope variable:

var scope = $rootScope.$new(); scope.data = {}; $ionicPopup.show({....


#9

Thank you! It works well!