3

I'd like to add an ID to ionic popup, but apparently it is not possible using the default options provided by the framework.

Since it will make my testing way easier using IDs, I'm trying to add it myself but with no luck.

Basically, what I have, is a service that creates all my popups (In the code below, I'm going to add only one, just for simplicity):

service:

angular.module('modalsService', []).service('modals', [
  '$ionicPopup', '$q', '$ionicSlideBoxDelegate', function($ionicPopup, $q, $ionicSlideBoxDelegate) {
    var modals;
    modals = this;
    modals.deferred = null;
    modals.confirm = function(obj, $scope) {
      modals.deferred = $q.defer();
      $ionicPopup.show({
        title: "Are you sure?",
        scope: $scope,
        cssClass: 'confirmation-modal ' + obj.modalClass,
        template: obj.modalMessage,
        buttons: [
          {
            text: "Not Now",
            type: 'button-outline button-positive secondary',
            onTap: function() {
              if (modals.deferred != null) {
                return modals.deferred.resolve(false);
              }
            }
          }, {
            text: obj.confirmText,
            type: 'button-outline button-positive main',
            onTap: function() {
              if (modals.deferred != null) {
                return modals.deferred.resolve(true);
              }
            }
          }
        ]
      });
      return modals.deferred.promise;
    };
    return modals;
  }
]);

pretty simple so far, a simple service that returns the popup as a promise, and in my controller I call it like this:

$scope.evtClick = function() {
  var test;
  test = {
    modalClass: "modal-test",
    modalMessage: 'Do you really want to ... ?',
    confirmText: 'Test'
  };
  return hgModals.confirm(test, $scope).then(function(res) {
    if (res === true) {
      return console.log("Clicked the confirm button");
    } else {
      return console.log("Clicked the cancel button");
    }
  });
};

The first parameter that I pass in the function, is an object with specific options for the modal I need to open.

I'd like to add the ID in that object as well, but then I have no idea how I can add it to the popup, before the promise is created, so that when I resolve the promise, the ID is already been added to the final code that creates the popup.

Something like this (service):

angular.module('modalsService', []).service('modals', [
  '$ionicPopup', '$q', '$ionicSlideBoxDelegate', function($ionicPopup, $q, $ionicSlideBoxDelegate) {
    var modals;
    modals = this;
    modals.deferred = null;
    modals.confirm = function(obj, $scope) {
      modals.deferred = $q.defer();
      var myConfirmModal = $ionicPopup.show({ //this is different from before
        title: "Are you sure?",
        scope: $scope,
        cssClass: 'confirmation-modal ' + obj.modalClass,
        template: obj.modalMessage,
        buttons: [
          {
            text: "Not Now",
            type: 'button-outline button-positive secondary',
            onTap: function() {
              if (modals.deferred != null) {
                return modals.deferred.resolve(false);
              }
            }
          }, {
            text: obj.confirmText,
            type: 'button-outline button-positive main',
            onTap: function() {
              if (modals.deferred != null) {
                return modals.deferred.resolve(true);
              }
            }
          }
        ]
      });
      myConfirmModal... //add ID here maybe? using obj.ID
      return modals.deferred.promise;
    };
    return modals; // the returning modal has already the ID applied
  }
]);
Nick
  • 13,493
  • 8
  • 51
  • 98

0 Answers0