Open a modal from another modal using bootstrap and angularJs - angularjs

Question

I am trying to open a modal by clicking on link on the another modal.
Here is my code:
.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');
});
}
}])
the upper modal is getting open and calling the below controller as well.
.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'
});
}
}])
on calling vm.pay function, another modal should open, where I am getting failed. And the best part I am not able to debug is it is not giving any error.
But from Network and Console from developer tool I have noticed that template is getting called but the controller is not getting call.
.controller('addPayoutDetailModalCtrl', ['$uibModalInstance', 'payoutMethods', function($uibModalInstance, payoutMethods){
// $uibModalInstance.close();
console.log('addPayoutDetailModalCtrl call');
}]);
So I am getting the first modal, but from that controller I am not able to open another modal.
Can anyone help!

Answer 1

I have updated the controllers jsfiddle
.controller('payoutCtrl', ['$scope', '$uibModal', function($scope, $uibModal) {
console.log('payoutCtrl');
var vm = this;
$scope.openAddPayout = function(){
var modalInstance = $uibModal.open({
templateUrl: "addPayoutMethod.tmpl.html",
controller: 'payoutModalCtrl',
controllerAs: 'vm',
size: 'lg',
resolve: {
payoutMethods: function(){
return vm.payoutMethods;
}
}
});
modalInstance.result.then(function() {
console.log('success');
}, function(){
console.log('error');
});
}
}])
.controller('payoutModalCtrl', ['$rootScope', '$scope', '$uibModal', '$uibModalInstance', 'payoutMethods', function($rootScope, $scope, $uibModal, $uibModalInstance, payoutMethods){
var vm = this;
console.log('payoutModalCtrl');
vm.payoutMethods = payoutMethods;
$scope.pay = function(method){
vm.templateUrl = "check.tmpl.html";
console.log(vm.templateUrl);
var modalScope = $rootScope.$new();
modalScope.modalInstance = $uibModal.open({
templateUrl:vm.templateUrl,
controller: 'addPayoutDetailModalCtrl',
size: 'sm'
});
}
}])
.controller('addPayoutDetailModalCtrl', ['$uibModalInstance', function($uibModalInstance){
console.log('addPayoutDetailModalCtrl call');
}]);

Answer 2

Here is an example I have used. I deleted a bunch of stuff just to give you an idea. And the main idea is to hide sections you don't want to show, and to show the sections you want to:
Controller:
(function () {
'use strict';
angular.module('app.createReportSchedule')
.controller('createReportScheduleController', createReportScheduleController);
createReportScheduleController.$inject = ['logger', 'manageReportSchedulesFactory', '$scope', '$modalInstance'];
function createReportScheduleController(logger, manageReportSchedulesFactory, $scope, $modalInstance) {
var vm = $scope;
vm.isUpdate = false;
vm.isUpdateNext = false;
vm.schedule = vm.$parent.schedule;
vm.ReportSchedule = {};
vm.SchedulingOptions = {};
vm.SchedulingUpdateOptions = {};
vm.ReportFilters = {};
vm.showReportSchedule = true;
// Reports Begin
vm.showMasterCallReport = false;
vm.showTimeAndMileage = false;
vm.showAllCallsRemote = false;
vm.showAllCalls = false;
// Reports End
vm.showReportScheduleUpdate = false;
// Report Modal Data
vm.MasterCallReportData = null;
vm.TimeAndMileageReportData = null;
vm.allCallsRemoteReportData = null;
// Modal Back Function
vm.back = function () {
if (vm.showReportSchedule || vm.showReportScheduleUpdate) {
$modalInstance.dismiss('cancel');
}
else if (vm.showMasterCallReport) {
vm.showReportSchedule = true;
vm.showMasterCallReport = false;
}
else if (vm.showTimeAndMileage) {
vm.showReportSchedule = true;
vm.showTimeAndMileage = false;
}
else if (vm.showAllCallsRemote) {
vm.showReportSchedule = true;
vm.showAllCallsRemote = false;
}
};
// Create Report Schedule
vm.next = function () {
if (vm.showReportSchedule) {
if (this.formCreateReportSchedule.$valid) {
vm.showReportSchedule = false;
vm.isUpdateNext = false;
if (vm.ReportSchedule.ReportTemplate.ReportTemplateId == 7) {
vm.showMasterCallReport = true;
return masterCallReportFactory.getData().then(function (data) {
if (logger.displayCommandResult(data)) {
vm.MasterCallReportData = data.Records[0];
}
});
}
if (vm.ReportSchedule.ReportTemplate.ReportTemplateId == 8) {
vm.showTimeAndMileage = true;
return timeAndMileageReportFactory.getData().then(function (data) {
if (logger.displayCommandResult(data)) {
vm.TimeAndMileageReportData = data.Records[0];
}
});
}
if (vm.ReportSchedule.ReportTemplate.ReportTemplateId == 9) {
vm.showAllCallsRemote = true;
return allCallsRemoteReportFactory.getData().then(function (data) {
if (logger.displayCommandResult(data)) {
vm.allCallsRemoteReportData = data.Records[0];
}
});
}
if (vm.ReportSchedule.ReportTemplate.ReportTemplateId == 20) {
vm.formSubmmision = true;
return vm.postScheduleCreationData();
}
} else {
logger.error('Error: Validation failed. Please correct data and try again');
}
}
else if (vm.isUpdate === true) {
if (this.formUpdateReportSchedule.$valid) {
vm.showReportScheduleUpdate = false;
vm.isUpdate = false;
vm.isUpdateNext = true;
if (vm.schedule.ReportTemplate.ReportTemplateId == 7) {
vm.showMasterCallReport = true;
}
if (vm.schedule.ReportTemplate.ReportTemplateId == 8) {
vm.showTimeAndMileage = true;
}
} else {
logger.error('Error: Validation failed. Please correct data and try again');
}
}
else if (vm.isUpdateNext === true) {
if (vm.showMasterCallReport || vm.showTimeAndMileage || vm.showAllCallsRemote || vm.showAllCalls || vm.showAllCallsSLALeft
|| vm.showBreakFix || vm.showCallAssetLine || vm.showDailyStatus || vm.showDailyStatusExtended || vm.showHighPriorityCalls
|| vm.showSLAMasterCalls || vm.showStockMovement) {
// Report Forms
if (this.masterCallReport.$valid || this.timeAndMileageReport.$valid || this.allCallsRemoteReport.$valid || this.allCallsReport.$valid
|| this.allCallsSLALeftReport.$valid || this.callAssetLinesReport.$valid || this.dailyStatusReport.$valid || this.dailyStatusExtendedReport.$valid
|| this.reportHighPriorityCalls.$valid || this.slaMasterCallReport.$valid || this.stockMovementReport.$valid) {
vm.formSubmmision = true;
console.log(vm.schedule);
return vm.postScheduleUpdateData();
}
} else {
return logger.error('Error: Validation failed. Please correct data and try again');
}
}
else if (vm.isUpdateNext === false) {
if (vm.showMasterCallReport || vm.showTimeAndMileage || vm.showAllCallsRemote || vm.showAllCalls || vm.showAllCallsSLALeft
|| vm.showBreakFix || vm.showCallAssetLine || vm.showDailyStatus || vm.showDailyStatusExtended || vm.showHighPriorityCalls
|| vm.showSLAMasterCalls || vm.showStockMovement) {
// Report Forms
if (this.masterCallReport.$valid || this.timeAndMileageReport.$valid || this.allCallsRemoteReport.$valid || this.allCallsReport.$valid
|| this.allCallsSLALeftReport.$valid || this.callAssetLinesReport.$valid || this.dailyStatusReport.$valid || this.dailyStatusExtendedReport.$valid
|| this.reportHighPriorityCalls.$valid || this.slaMasterCallReport.$valid || this.stockMovementReport.$valid) {
vm.formSubmmision = true;
return vm.postScheduleCreationData();
}
} else {
return logger.error('Error: Validation failed. Please correct data and try again');
}
}
};
}
})();
HTML:
<!-- Begin Report Schedule Create-->
<form name="formCreateReportSchedule" novalidate ng-show="showReportSchedule">
<div class="modal-header">
<h3 class="modal-title">Report Scheduling Options</h3>
</div>
<div class="modal-body">
<!-- New Modal -->
<div class="row">
<!-- Report Name -->
<div class="col-md-6">
<label>Report Schedule Name:</label>
<div class="input-text">
<input type="text" name="iScheduleName" ng-model="ReportSchedule.ScheduleName" ng-required="true" />
<div class="fadeInOut" ng-class="{error : iScheduleNameError}" ng-mouseenter="iScheduleNameError = true" ng-mouseleave="iScheduleNameError = false" ng-show="(formCreateReportSchedule.$submitted || formCreateReportSchedule.iScheduleName.$touched) && formCreateReportSchedule.iScheduleName.$error.required">
<span class="icon-warning"></span>
<div>
<p>
<span>Please Enter a Schedule Name</span>
</p>
</div>
</div>
</div>
</div>
<!-- Report Template -->
<div class="col-md-6">
<label>Report Type</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Report Name"
ng-model="ReportSchedule.ReportTemplate"
ng-options="SchedulingOptions.SelectableReportTemplates"
cc-fields="ReportTemplateName"
cc-key-field="ReportTemplateId"
cc-allow-search="SchedulingOptions.SelectableReportTemplates != null && SchedulingOptions.SelectableReportTemplates.length > 5"
ng-required="true"
name="iReportTemplate">
</cc-dropdown>
<div class="fadeInOut" ng-class="{error : iReportTemplateError}" ng-mouseenter="iReportTemplateError = true" ng-mouseleave="iReportTemplateError = false" ng-show="(formCreateReportSchedule.$submitted || formCreateReportSchedule.iReportTemplate.$touched) && formCreateReportSchedule.iReportTemplate.$error.required">
<span class="icon-warning"></span>
<div>
<p>
<span>Please Select a Template</span>
</p>
</div>
</div>
</div>
</div>
<!-- Hours -->
<div class="col-md-6">
<label>Execution Time</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Report Time"
ng-model="ReportSchedule.ExecutionTime"
ng-options="SelectableExecutionTimes"
cc-fields="<self>"
cc-allow-search="true"
ng-required="true"
name="iExecutionTime">
</cc-dropdown>
<div class="fadeInOut" ng-class="{error : iExecutionTimeError}" ng-mouseenter="iExecutionTimeError = true" ng-mouseleave="iExecutionTimeError = false" ng-show="(formCreateReportSchedule.$submitted || formCreateReportSchedule.iExecutionTime.$touched) && formCreateReportSchedule.iExecutionTime.$error.required">
<span class="icon-warning"></span>
<div>
<p>
<span>Please Select an Execution Time</span>
</p>
</div>
</div>
</div>
</div>
<!-- Reporting Period -->
<div class="col-md-6">
<label>Period</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Reporting Period"
ng-model="ReportSchedule.ReportPeriod"
ng-options="SchedulingOptions.SelectableReportingPeriods"
cc-fields="ReportPeriodName"
cc-key-field="ReportPeriodId"
cc-allow-search="SchedulingOptions.SelectableReportPeriods != null && SchedulingOptions.SelectableReportPeriods.length > 5"
ng-required="true"
name="iReportPeriod">
</cc-dropdown>
<div class="fadeInOut" ng-class="{error : iReportPeriodError}" ng-mouseenter="iReportPeriodError = true" ng-mouseleave="iReportPeriodError = false" ng-show="(formCreateReportSchedule.$submitted || formCreateReportSchedule.iReportPeriod.$touched) && formCreateReportSchedule.iReportPeriod.$error.required">
<span class="icon-warning"></span>
<div>
<p>
<span>Please Select a Reporting Period</span>
</p>
</div>
</div>
</div>
</div>
<!-- Frequency -->
<div class="col-md-6">
<label>Frequency</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Report Frequency"
ng-model="ReportSchedule.ReportFrequency"
ng-options="SchedulingOptions.SelectableReportFrequencies"
ng-change="frequencyChanged()"
cc-fields="ReportFrequencyName"
cc-key-field="ReportFrequencyId"
cc-allow-search="SchedulingOptions.SelectableReportFrequencies != null && SchedulingOptions.SelectableReportFrequencies.length > 5"
ng-required="true"
name="iReportFrequency">
</cc-dropdown>
<div class="fadeInOut" ng-class="{error : iReportFrequencyError}" ng-mouseenter="iReportFrequencyError = true" ng-mouseleave="iReportFrequencyError = false" ng-show="(formCreateReportSchedule.$submitted || formCreateReportSchedule.iReportFrequency.$touched) && formCreateReportSchedule.iReportFrequency.$error.required">
<span class="icon-warning"></span>
<div>
<p>
<span>Please Select a Report Frequency</span>
</p>
</div>
</div>
</div>
</div>
<!-- Frequency Options -->
<div class="col-md-6">
<label>Frequency Options</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Report Frequency Option"
ng-model="ReportSchedule.ReportFrequencyOption"
ng-options="FrequencyOptions"
ng-disabled="FrequencyOptions.length == 0"
cc-fields="ReportFrequencyOptionName"
cc-key-field="ReportFrequencyOptionId"
cc-allow-search="SchedulingOptions.SelectableReportFrequencyOptions != null && SchedulingOptions.SelectableReportFrequencyOptions.length > 5"
ng-required="FrequencyOptions.length != 0"
name="iReportFrequencyOption">
</cc-dropdown>
<div class="fadeInOut" ng-class="{error : iReportFrequencyOptionError}" ng-mouseenter="iReportFrequencyOptionError = true" ng-mouseleave="iReportFrequencyOptionError = false" ng-show="(formCreateReportSchedule.$submitted || formCreateReportSchedule.iReportFrequencyOption.$touched) && formCreateReportSchedule.iReportFrequencyOption.$error.required">
<span class="icon-warning"></span>
<div>
<p>
<span>Please Select a Report Frequency Option</span>
</p>
</div>
</div>
</div>
</div>
<!-- Email -->
<div class="col-md-12">
<label>Recipient Email:</label>
<div class="input-text">
<input type="text" name="iEmail" ng-required="true" ng-model="ReportSchedule.EmailRecipients" />
<div class="fadeInOut" ng-class="{error : iEmailError}" ng-mouseenter="iEmailError = true" ng-mouseleave="iEmailError = false" ng-show="(formCreateReportSchedule.$submitted || formCreateReportSchedule.iEmail.$touched) && formCreateReportSchedule.iEmail.$error.required">
<span class="icon-warning"></span>
<div>
<p>
<span>Please Enter a Recipient Email Address</span>
</p>
</div>
</div>
</div>
</div>
</div><!-- row -->
</div> <!--body-->
<div class="modal-footer">
<button class="btn btn-warning left" ng-click="back()" ng-disabled="formSubmmision">Cancel</button>
<button class="btn btn-primary right" type="submit" ng-click="next()" ng-disabled="formSubmmision">Next</button>
</div>
</form>
<!-- Selected Report Settings: Master Call Report -->
<form name="masterCallReport" novalidate ng-show="showMasterCallReport">
<div class="modal-header">
<h3 class="modal-title">Schedule: Master Call Report</h3>
</div>
<div class="modal-body">
<div class="row">
<!-- Customer -->
<div class="col-md-6">
<label>Customer</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Select a Customer"
ng-model="MasterCallReportData.Customer"
ng-options="MasterCallReportData.SelectableCustomer"
cc-fields="CustomerName"
cc-key-field="CustomerId"
cc-allow-search="MasterCallReportData.SelectableCustomer != null && MasterCallReportData.SelectableCustomer.length > 5"
name="iCustomer">
</cc-dropdown>
</div>
</div>
<!-- Resolver Group -->
<div class="col-md-6">
<label>Resolver Group</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="ALL Resolver Groups"
ng-model="MasterCallReportData.ResolverGroup"
ng-options="MasterCallReportData.SelectableResolverGroup"
cc-fields="ResolverGroupDescription"
cc-key-field="ResolverGroupId"
cc-allow-search="MasterCallReportData.SelectableResolverGroup != null && MasterCallReportData.SelectableResolverGroup.length > 5"
name="iResolverGroup">
</cc-dropdown>
</div>
</div>
<!-- Region -->
<div class="col-md-6">
<label>Region</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="ALL Regions"
ng-model="MasterCallReportData.Region"
ng-options="MasterCallReportData.SelectableRegion"
cc-fields="RegionDescription"
cc-key-field="RegionId"
cc-allow-search="MasterCallReportData.SelectableRegion != null && MasterCallReportData.SelectableRegion.length > 5"
name="iRegion">
</cc-dropdown>
</div>
</div>
<!-- Status -->
<div class="col-md-6">
<label>Status</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Open"
ng-model="MasterCallReportData.CallStatus"
ng-options="MasterCallReportData.SelectableStatus"
cc-fields="Status + ' - ' + Reason"
cc-key-field="CallStatusId"
cc-allow-search="MasterCallReportData.SelectableStatus != null && MasterCallReportData.SelectableStatus.length > 5"
name="iStatus">
</cc-dropdown>
</div>
</div>
<!-- Affected End User -->
<div class="col-md-6">
<label>Affected End User</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Select a Contact Person"
ng-model="MasterCallReportData.AffectedEndUser"
ng-options="MasterCallReportData.SelectableAffectedEndUser"
cc-fields="FullName"
cc-key-field="ContactPersonId"
cc-allow-search="MasterCallReportData.SelectableAffectedEndUser != null && MasterCallReportData.SelectableAffectedEndUser.length > 5"
name="iAffectedEndUser">
</cc-dropdown>
</div>
</div>
<!-- Resolution Method -->
<div class="col-md-6">
<label>Resolution Method</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="ALL Method"
ng-model="MasterCallReportData.ResolutionMethod"
ng-options="MasterCallReportData.SelectableResolutionMethod"
cc-fields="ResolutionMethodDescription"
cc-key-field="ResolutionMethodId"
cc-allow-search="false"
name="iResolutionMethod">
</cc-dropdown>
</div>
</div>
<!-- SLA Filter -->
<div class="col-md-6">
<label>SLA Filter</label>
<div class="input-text">
<input type="text" name="iSLAFilter" ng-model="MasterCallReportData.SLAFilter" />
</div>
</div>
<!-- Logged By -->
<div class="col-md-6">
<label>Logged By</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="Select an Employee"
ng-model="MasterCallReportData.LoggedBy"
ng-options="MasterCallReportData.SelectableLoggedBy"
cc-fields="FullName"
cc-key-field="EmployeeId"
cc-allow-search="MasterCallReportData.SelectableLoggedBy != null && MasterCallReportData.SelectableLoggedBy.length > 5"
name="iLoggedBy">
</cc-dropdown>
</div>
</div>
<!-- Call Priority -->
<div class="col-md-6">
<label>Call Priority</label>
<div class="input-dropdown">
<cc-dropdown cc-placeholder="ALL Priorities"
ng-model="MasterCallReportData.Priority"
ng-options="MasterCallReportData.SelectableCallPriority"
cc-fields="CallPriorityDescription"
cc-key-field="CallPriorityId"
cc-allow-search="false"
name="iPriority">
</cc-dropdown>
</div>
</div>
<!-- SLA Breaching Warning -->
<div class="col-md-6">
<label>SLA Breaching Warning</label>
<div class="input-switch">
<input id="toggle-2" class="toggle toggle-yes-no" type="checkbox" ng-model="MasterCallReportData.SLABreachWarning">
<label for="toggle-2" data-on="Yes" data-off="No"></label>
</div>
</div>
<!-- Logged -->
<div class="col-md-6">
<label>Logged</label>
<div class="input-switch">
<input id="toggle-3" class="toggle toggle-yes-no" type="checkbox" ng-model="MasterCallReportData.Logged">
<label for="toggle-3" data-on="Yes" data-off="No"></label>
</div>
</div>
<!-- Resolved -->
<div class="col-md-6">
<label>Resolved</label>
<div class="input-switch">
<input id="toggle-4" class="toggle toggle-yes-no" type="checkbox" ng-model="MasterCallReportData.Resolved">
<label for="toggle-4" data-on="Yes" data-off="No"></label>
</div>
</div>
</div><!-- Row End-->
</div>
<div class="modal-footer">
<button class="btn btn-warning left" ng-click="back()" ng-disabled="formSubmmision">Back</button>
<button class="btn btn-primary right" type="submit" ng-click="next()" ng-disabled="formSubmmision">Next</button>
</div>
</form>