如何在离子点击按钮时显示不同的弹出窗口？

Question

我试图在单击按钮时显示一些模式弹出窗口。我能够显示弹出窗口，但我试图在单击按钮时显示不同的弹出窗口。在我的代码中，我采用了不同的 HTML 弹出窗口，但是当我单击任何按钮时，它显示相同的弹出窗口 up.Could 你请告诉我如何在不同的按钮单击

上显示不同的弹出屏幕

这是我不同的弹出屏幕

   <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">New Contact</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-click="modal.hide()">Create</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>
        <script id="templates/copymodal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">copy Contact</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">copy first Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-click="modal.hide()">Create</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>

js文件 // 代码在这里

angular.module('ionicApp', ['ionic'])

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

$scope.firstpopup=function(){
  $scope.modal.show()
}


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


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

});

这是我的代码 http://plnkr.co/edit/KXzUO5OL6Imy9yKP0Ktq?p=preview

Answer 1

您可以在范围内以不同方式命名模态框。像这样的东西应该有用。

angular.module('ionicApp', ['ionic'])

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

$scope.firstpopup=function(){
  $scope.modalFirst.show()
}


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


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

});

您还必须更改 index.html 以确保在关闭时关闭正确的模式。

更新： http://plnkr.co/edit/10NPJIdDHrq6c9HhEchh?p=info

如何在离子点击按钮时显示不同的弹出窗口？

how to show different pop up on click of button in ionic?

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat

ionic-framework