Question

我试图在按钮点击时显示一些模态弹出窗口。我能够显示弹出窗口，但我试图在按钮单击时显示不同的弹出窗口。在我的代码中，我采用不同的弹出式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

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

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

1 个答案: