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

22 views

AngularJS_V1x

Skip to first unread message

here2learnAndhelp

unread,

May 15, 2019, 2:53:56 PM5/15/19

to Angular and AngularJS discussion

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. 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();
  }
  
}

Sander Elias

unread,

May 17, 2019, 2:19:48 AM5/17/19

to Angular and AngularJS discussion

Hi Here2learn,

Your merge should work, but I think you forgot to update the injector string/side.

Regards

Sander

Reply all

Reply to author

Forward

0 new messages