[AngularJS] Combining two separate class files (Controllers) containing form fields in one modal using AngularJS 1.3.x and $mdDialog

[here2learnAndhelp]

Hi,  I have two controllers being used in this app that are within their 
own modal files.  I want to be able to combine both of these controllers in 
one modal and call the modal using ng-click within an input element.  I 
have posted alot of code in this PLUNKR: Combined controllers in one modal 
<https://plnkr.co/edit/Rtvf7rgGEvJ5a4ScUszK?p=info> and I sincerely hope 
someone will help me.  

I am just really learning AngularJS framework and the way the application 
is structured, I'm not sure how to use ng-controller or make the classes 
regular functions and perhaps just place those directives in the html.  
What I have tried is to 'merge' the two controllers, but after googling, I 
saw this wasn't a good thing to do, and I agree since both of these 
controllers have their own save/cancel functionality and when trying to 
combine the two controllers into one form, I am getting lost. Please take a 
look at the PLUNKER: Combined Controllers in one Modal 
<https://plnkr.co/edit/Rtvf7rgGEvJ5a4ScUszK?p=info> and help me how to do 
this.  I appreciate it.

Here is some code so that you can see where I began (full code in Plunkr)

*First Controller*

export class firstController {
  constructor ($http, $mdDialog, param3, param4) {
    this.isSaving = false;
    this._$mdDialog = $mdDialog;
    this.param3 = param3;
    this.param4 = param4;
    this.categories = 
this.param4.generateCategoriesWithCostForCourse(param3.id, param3.name);
  }

  handleFirstControllerCostChange(category) {
    if (category.cost_change) {
      category.adjusted_cost = (category.base_cost || 0) + 
(category.cost_change || 0);
    } else {
      category.adjusted_cost = category.base_cost;
      category.cost_change_reason = null;
    }
    return category;
  }

  save() {
    //...
  }
}






*Second Controller:*
export class secondController {
  constructor ($http, $mdDialog, param3, param4, param5) {
    this.isSaving = false;
    this._$mdDialog = $mdDialog;
    this.param3 = param3;
    this.param4 = param4;
    this.param5 = param5;
    
    this.courseData = 
this.param3.getCourseDataForNewStudents(this.param4.course_id, 
this.param5.semester_id);
    this.courseBaseCost = this.param4.course_category.toUpperCase() == 
'FREE' ? 0 : this.courses.base_cost;

    this.handleSecondControllerChange();
  }

  handleSecondControllerCostChange() {
    if (this.courseData.cost_change) {
      this.courseData.adjusted_cost = (this.courseBaseCost || 0) + 
(this.courseData.cost_adjustment || 0);
    } else {
      this.courseData.adjusted_cost = this.courseBaseCost;
      this.courseData.cost_change_reason = null;
    }
      save() {
    //...
    }
  }

Attempt to combine:

// PLEASE READ BELOW COMMENT 
/* Commented parameters are from secondController that I was attempting to 
'merge' 
 * into firstController to create one controller for both classes
 */

export class combinedControllersModalController {
  constructor($http, $mdDialog, param3, param4, param5, param6) {
      this.isSaving = false;
      this._$mdDialog = $mdDialog;
      this.param3 = param3;
      this.param4 = param4;
    //   this.param5 = param5; 
    //   this.param6 = param6;
      this.categories = 
this.param4.generateCategoriesWithCostForCourse(param3.id, param3.name);
    // this.courseData = 
this.param3.getCourseDataForNewStudents(this.param4.course_id, 
this.param5.semester_id);
    // this.courseBaseCost = this.param4.course_category.toUpperCase() == 
'FREE' ? 0 : this.courses.base_cost;
    
      this.handleSecondControllerChange();
  }
  
  handleFirstControllerCostChange(category) {
    if (category.cost_change) {
      category.adjusted_cost = (category.base_cost || 0) + 
(category.cost_change || 0);
    } else {
      category.adjusted_cost = category.base_cost;
      category.cost_change_reason = null;
    }
    return category;
  }


  handleSecondControllerCostChange() {
    if (this.courseData.cost_change) {
      this.courseData.adjusted_cost = (this.courseBaseCost || 0) + 
(this.courseData.cost_adjustment || 0);
    } else {
      this.courseData.adjusted_cost = this.courseBaseCost;
      this.courseData.cost_change_reason = null;
    }
    
  save() {
    //...
    }

  cancel() {
    this._$mdDialog.hide();
  }
  
}



-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/54c502c7-8cc1-4ab8-9277-16dbac3d82c0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.