Question

我尝试在项目中添加多个模态。

问题是只有最后一个模态视图出现，无论我调用哪一个。

以下是代码：

.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

我该如何解决这个问题？

Answer 1

错误的一点是你的$scope.modal变量。因为您尝试将2个模态转换为1个变量。修复如下：

.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

Answer 2

创建这样的服务：

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

})

并使用ng-click调用模态：

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

离子多重模态仅持续显示

2 个答案: