我試圖通過單擊另一模式上的鏈接來打開模式。使用bootstrap和angularJs從另一模式打開模式
這裏是我的代碼:
.controller('payoutCtrl', ['$scope', '$uibModal', 'payoutService', function($scope, $uibModal, payoutService) {
console.log('payout');
var vm = this;
$scope.openAddPayout = function(){
var modalInstance = $uibModal.open({
templateUrl: "app/modules/homePage/payment/Payout/addPayoutMethod.tmpl.html",
controller: 'payoutModalCtrl',
controllerAs: 'vm',
size: 'lg',
resolve: {
payoutMethods: function(){
return vm.payoutMethods;
}
}
});
modalInstance.result.then(function() {
console.log('success');
}, function(){
//Do stuff with respect to dismissal
console.log('error');
$state.go('homePage.payment.payout');
});
}
}])
上模態越來越開放,並調用下面控制器爲好。
.controller('payoutModalCtrl', ['$rootScope', '$scope', '$uibModal', '$uibModalInstance', 'payoutMethods', function($rootScope, $scope, $uibModal, $uibModalInstance, payoutMethods){
var vm = this;
vm.payoutMethods = payoutMethods;
vm.pay = function(method){
console.log(method);
vm.templateUrl;
if(method == 1){
vm.templateUrl = "app/modules/homePage/payment/Payout/check.tmpl.html"
}
else if(method == 2){
vm.templateUrl = "app/modules/homePage/payment/Payout/payPal.tmpl.html"
}
else if(method == 3){
vm.templateUrl = "app/modules/homePage/payment/Payout/directDeposite.tmpl.html"
}
console.log(vm.templateUrl);
var modalScope = $rootScope.$new();
modalScope.modalInstance = $uibModal.open({
templateUrl:vm.templateUrl,
controller: 'addPayoutDetailModalCtrl',
size: 'sm'
});
}
}])
上調用vm.pay功能,另一個模式應該打開,在這裏我得到失敗。而我無法調試的最好的部分是它沒有給出任何錯誤。
但從網絡和控制檯開發人員工具我已經注意到模板正在調用,但控制器沒有得到調用。
.controller('addPayoutDetailModalCtrl', ['$uibModalInstance', 'payoutMethods', function($uibModalInstance, payoutMethods){
// $uibModalInstance.close();
console.log('addPayoutDetailModalCtrl call');
}]);
所以我得到第一個模態,但從該控制器我無法打開另一個模態。
任何人都可以幫忙!
爲第二模式我看到控制器名稱爲'openModalCtrl',但它應該是'addPayoutDetailModalCtrl'? – jos
你是否真的需要從另一個模態打開模態? – Jax
爲什麼你沒有在第二個模態實例中傳遞'vm.templateUrl'和控制器'addPayoutDetailModalCtrl'? –