CODEWITHSUNDEEP
ionic-framework
Satch3000
Satch3000

Reputation: 49422

Ionic Multiple Modals only last showing

I have tried adding multiple modals to my project.

The problem is that only the last modal view shows up, no matter which one I call.

Here's the code:

.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

How can I fix this?

Upvotes: 1

Views: 2061

Answers (2)

Michel Arteta
Michel Arteta

Reputation: 1384

Create a service like this: 

.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();
};

})

and call the modal with an ng-click like this: 

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

Upvotes: 1

Nam Pham
Nam Pham

Reputation: 1224

The wrong point is your $scope.modal variable. Because you are trying to access 2 modal into 1 variable. Fix like this:

.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

Upvotes: 4

Related Questions