ionic framework - ionicframework - Ionic Multiple Modals solo muestra por última vez

ionic panel

Question

He intentado agregar múltiples modales a mi proyecto.

El problema es que solo aparece la última vista modal, no importa a cuál llame.

Aquí está el código:

.controller(''AppCtrl'', function($scope, $ionicModal, $timeout) {



$scope.modal1Data = {};
  $ionicModal.fromTemplateUrl(''templates/modal1.html'', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.closeModal1 = function() {
    $scope.modal.hide();
  };

  $scope.model1 = function() {
    $scope.modal.show();
  };

  $scope.doModal1 = function() {
    console.log(''Doing Modal1'', $scope.modal1Data);

    $timeout(function() {
      $scope.closeUseful();
    }, 1000);
  };


  $scope.modal2Data = {};
  $ionicModal.fromTemplateUrl(''templates/modal2.html'', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.closeModal2 = function() {
    $scope.modal.hide();
  };

  $scope.model2 = function() {
    $scope.modal.show();
  };

  $scope.doModal2 = function() {
    console.log(''Doing Modal2'', $scope.modal2Data);

    $timeout(function() {
      $scope.closeUseful();
    }, 1000);
  };


}) //end controller

¿Cómo puedo arreglar esto?

Answer 1

El punto equivocado es su variable $scope.modal . Porque está intentando acceder a 2 modal en 1 variable. Arregle así:

.controller(''AppCtrl'', function($scope, $ionicModal, $timeout) {



$scope.modal1Data = {};
  $ionicModal.fromTemplateUrl(''templates/modal1.html'', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.closeModal1 = function() {
    $scope.modal.hide();
  };

  $scope.model1 = function() {
    $scope.modal.show();
  };

  $scope.doModal1 = function() {
    console.log(''Doing Modal1'', $scope.modal1Data);

    $timeout(function() {
      $scope.closeUseful();
    }, 1000);
  };


  $scope.modal2Data = {};
  $ionicModal.fromTemplateUrl(''templates/modal2.html'', {
    scope: $scope
  }).then(function(modal) {
    //Fix this line, changed the variable name to different name.
    $scope.modal2 = modal;
  });

  $scope.closeModal2 = function() {
    $scope.modal2.hide();
  };

  $scope.model2 = function() {
    $scope.modal2.show();
  };

  $scope.doModal2 = function() {
    console.log(''Doing Modal2'', $scope.modal2Data);

    $timeout(function() {
      $scope.closeUseful();
    }, 1000);
  };


}) //end controller

Answer 2

Crea un servicio como este:

.service(''modalService'', function($ionicModal) {

this.openModal = function(id) {
  var _this = this;

  if(id == 1) {
    $ionicModal.fromTemplateUrl(''templates/search.html'', {
      scope: null,
      controller: ''SearchCtrl''
    }).then(function(modal) {
      _this.modal = modal;
      _this.modal.show();
    });
  } else if(id == 2) {
    $ionicModal.fromTemplateUrl(''templates/login.html'', {
      scope: $scope
    }).then(function(modal) {
      $scope.modal = modal;
    });
  } else if( id == 3) {
    $ionicModal.fromTemplateUrl(''templates/signup.html'', {
      scope: $scope
    }).then(function(modal) {
      $scope.modal = modal;
    });
  }
};

this.closeModal = function() {
  var _this = this;
  if(!_this.modal) return;
  _this.modal.hide();
  _this.modal.remove();
};

})

y llame al modal con un ng-clic como este:

ng-click="modalService.openModal(1)"