[AngularJS] How to combine two existing controllers (classes) into one new controller

[here2learnAndhelp]

Hi everyone,

I posted this in 'discussion' form by accident, I meant to post it as a 
question. 

I want to reuse existing controllers by rolling them into one.  I have two 
existing modals containing two controllers.  I want to combine the two 
controllers in one parent modal (the two controllers would not be 
individual modals anymore, just content for the new parent modal).  

Each controller controls a form with action buttons, but I want  to combine 
the forms into one form so that I can submit all fields (in both 
controllers) when the user clicks 'save'.  "*Merging*" the two controllers 
into one controller doesn't appear to be the best solution(?), and my 
trouble is trying to access the properties of one controller to show within 
the other controller).  Here is my Plunkr with the source code for the files 
<https://plnkr.co/edit/Rtvf7rgGEvJ5a4ScUszK>.  If you have different 
approaches, please post.  I'd appreciate help with this.

Controller1
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() {
    //...
  }
}

Controller2
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() {
    //...
    }
  }

Combined New Controller containing Controller1 and Controller2 (attempt)
// 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/49f9967a-92ca-49b6-b7c8-b6ac22de22fc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.