How to create two ionic modal in a cordova app?

Hi in my app i have already a ionic modal for login

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

Now i need to create a new ionic modal with new html page. How can I do this?

回答1:

While the answer is completely valid, but you don't need to create new controller every time you need a modal.

app.controller('Ctrl1' function($scope, $ionicModal){

     $ionicModal.fromTemplateUrl('modalA.html', {
          scope: $scope,
          animation: 'slide-in-up'
        }).then(function(modal) {
          $scope.ModalA= modal;
        });

     $ionicModal.fromTemplateUrl('modalB.html', {
          scope: $scope,
          animation: 'slide-in-up'
        }).then(function(modal) {
          $scope.ModalB= modal;
        });


    //now you can indivitaully call any modal to show

    $scope.ShowModalA = function (){
         $scope.ModalA.show()
    }

    $scope.ShowModalB= function (){
         $scope.ModalB.show()
    }

 })

回答2:

Single Function multiple Instance.

$scope.openModelTemplate = function(_templateName){
    if($scope.modal){
        $scope.closeModal();
    }
    var templateName = _templateName;
    $ionicModal.fromTemplateUrl("./templates/" + templateName + ".html",{
        scope : $scope,
        animation : "slide-in-up"
    }).then(function(modal){
        $scope.modal = modal;
        $scope.openModal();
    });
};

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

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

$scope.$on('$destroy', function() {
    $scope.modal.remove();
});

回答3:

You should generally put each modal in the controller for a specific view. That way, as you leave the view, you can destroy the modal (if appropriate).

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($rootScope, $ionicConfig) {

})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  $ionicConfigProvider.backButton.text('').previousTitleText(false);

  $stateProvider

    .state('page1', {
    url: "/page1",
    templateUrl: "page1.html",
    controller: 'Page1Controller'
  })

  .state('page2', {
    url: "/page2",
    templateUrl: "page2.html",
    controller: 'Page2Controller'
  })

  $urlRouterProvider.otherwise('/page1');

})

.controller("Page1Controller", function($scope, $ionicModal) {
  console.log("Page1Controller!");

  $scope.$on("$ionicView.beforeLeave", function() {
    if ($scope.modal) $scope.modal.remove();
  })
  $scope.openModal = function() {
    $ionicModal.fromTemplateUrl('modal1.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();

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

})

.controller("Page2Controller", function($scope, $ionicModal) {
  console.log("Page2Controller!");

  $scope.$on("$ionicView.beforeLeave", function() {
    if ($scope.modal) $scope.modal.remove();
  })
  $scope.openModal = function() {
    $ionicModal.fromTemplateUrl('modal2.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal;
      $scope.modal.show();

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

})

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Backbutton Issue</title>

  <link href="//code.ionicframework.com/1.0.0-rc.4/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js"></script>

</head>

<body ng-app="starter">
  <ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>

  <script id="page1.html" type="text/ng-template">
<ion-view title="Page 1">

  <ion-content class="padding">
    <h2>This is page one!</h2>
    <button class="button" ui-sref="page2">Go To Page 2</button>
    <button class="button" ng-click="openModal()">Open Modal 1</button>
  </ion-content>

</ion-view>
  </script>

  <script id="page2.html" type="text/ng-template">
<ion-view title="Page 2">

  <ion-content class="padding">
    <h2>This is page two!</h2>
    <button class="button" ng-click="openModal()">Open Modal 2</button>
  </ion-content>

</ion-view>
  </script>


  <script id="modal1.html" type="text/ng-template">
<ion-modal-view>

  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Modal 1!</h1>
    <div class="buttons">
      <button class="button" ng-click="closeModal()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    This is Modal # 1!
  </ion-content>
</ion-modal-view>
  </script>

  <script id="modal2.html" type="text/ng-template">
<ion-modal-view>

  <ion-header-bar align-title="left" class="bar-positive">
    <h1 class="title">Modal 2!</h1>
    <div class="buttons">
      <button class="button" ng-click="closeModal()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    This is Modal # 2!
  </ion-content>
</ion-modal-view>
  </script>


</body>

</html>