Ionic Multiple Modals仅持续显示 [英] Ionic Multiple Modals only last showing

问题描述

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

I have tried adding multiple modals to my project.

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

The problem is that only the last modal view shows up, no matter which one I call.

这是代码：

.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

我怎样才能解决这个问题？

How can I fix this?

推荐答案

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

The wrong point is your $scope.modal variable. Because you are trying to access 2 modal into 1 variable. Fix like this:

.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

这篇关于Ionic Multiple Modals仅持续显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！