Ionic Multiple Modals only last showing

我已經嘗試在我的項目中添加多個模態。Ionic Multiple Modals only last showing

問題是隻有最後一個模態視圖出現，不管我打電話給誰。

下面的代碼：

.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

我怎樣才能解決這個問題？

來源

2015-11-01 Satch3000

錯誤的一點是您的$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

來源

2015-11-02 01:07:24

這種方法是不錯，但更好的解決方案將創建一個服務並通過傳遞一個id來調用模式（打開/關閉）。這樣你可以避免$ scope的問題。 – Mike

創建這樣一個服務：

.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點擊這樣的：

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

來源

2016-10-12 15:13:42 Mike

Ionic Multiple Modals only last showing

回答

相關問題