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

【问题标题】：how to show different pop up on click of button in ionic?如何在点击离子按钮时显示不同的弹出窗口？
【发布时间】：2015-03-24 13:23:09
【问题描述】：

我试图在单击按钮时显示一些模式弹出窗口。我能够显示弹出窗口，但我试图在按钮单击时显示不同的弹出窗口。在我的代码中，我采用不同的 HTML 弹出窗口，但是当我单击任何按钮时，它会显示相同的弹出窗口。您能告诉我如何在不同的按钮单击上显示不同的弹出屏幕

这是我的不同弹出屏幕

   <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

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat ionic-framework

【解决方案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

【讨论】：