Passing Controller into Controller in Javascript

Question

I'm trying to pass my controller into another controller and i keep getting an Error: [$injector:unpr] Unknown provider: MchControllerProvider <- MchController

How do i properly inject one controller into another? Here is my code:

This section is the GroupMaintenanceBrowsePlansCtrl->

(function () {
    'use strict';

    var controllerId = 'GroupMaintenanceBrowsePlansCtrl';

    angular.module('myApp').controller(controllerId, ['$scope', 'RenewalGroupDataService', 'logger', 'mchService', 'MchController' , Controller]);

    function Controller($scope, datacontext, logger,mchService, MchController) {
    logger = logger.forSource(controllerId);

....

This section is the MchController ->

'use strict';

myApp.controller('MchController', function ($scope, $routeParams, mchService, CustomerDataService, EntityInfoService, RatesDataService, RenewalGroupDataService) {
    console.log('reached MchController');
    //Rout parameters as passed via App.js
    $scope.routeParams = {
        type: $routeParams.Type,
        id: $routeParams.Id
    };

    //Properties associated with data
    $scope.visible = {
        experience: true,
        persistency: true,
    }

    // define view model and expose it to the scope
    var vm = {
        title: 'Loading MCH Name... ',
        CustomerNumber: 'Loading MCH Number...'
    };

    $scope.vm = vm; //local scope to MchController

    vm.type = $routeParams.Type;
    vm.id = $routeParams.Id;
    vm.togglePlans = togglePlans;
    vm.toggleRates = toggleRates;
    vm.getRateInformation = getRateInformation;
    vm.getMch6 = getMch6;
    vm.Mch2Information = [];
    vm.searchParameters = mchService.searchParameters;

    function togglePlans()
    {
        vm.expandedPlans = !vm.expandedPlans;
    }

    //Puts multiple sets of Mch2 data into array to iterate through
    vm.Mch2Information = new Array();
    vm.getEntityInformation = function () {
        getEntityInformation('MCH', mchService.searchParameters);
    }

    //Initialize GET command for Customer Information
    //getEntityInformation($routeParams.Type, $routeParams.Id);

    function getEntityInformation(type, id)
    {
        switch (type)
        {
            case "MCH": getCustomerInformation(id);
                    //getMch6();
                    getMch2Information(id);
        ....

verify that the file containing the MCHController definition is included in your index.html. — Gordon Bockus, Sep 29 '14 at 16:14

score 1 · Answer 1 · edited May 23 '17 at 12:14

You can't inject one controller into another with dependency injection, but you can nest controllers and take advantage of prototypical inheritance between nested controllers:

  <body ng-controller="MainCtrl">
    <div ng-controller="ChildCtrl">
      <p>Hello {{name}}!</p>
      <button ng-click="parentAction()">parent action</button>
      <button ng-click="overriddenAction()">overriden action</button>
    </div>
  </body>

js code:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.parentAction = function () {
    alert('greetings from parent controller')
  };
  $scope.overriddenAction = function () {
    alert('greetings from parent controller');
  };
});

app.controller('ChildCtrl', function ($scope) {
  $scope.overriddenAction = function () {
    alert('greetings from child controller');
  };
})

this way you can access functions and objects defined on the parent controllers. Or you can event override these objects or functions.

http://plnkr.co/edit/Kmi4wm3aYrOf1shpmM5D?p=preview

I recommend to read this question if you want to know more about prototypical inheritance in angularjs: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

score 0 · Answer 2 · answered Sep 29 '14 at 16:28

0

You cannot inject a controller into another controller. If there is a shared logic between the 2 controllers, put that inside a service and inject that in the controller.

Ideally, your controller should be as thin as possible and most (all, if possible) of the business logic should reside in a service.

answered Sep 29 '14 at 16:28

Abhishek Jain

2,957
23
35

Since controllers are objects in Javascript and you can do dependency injection on objects then it would logically stand that one could dependency inject the controller into another object (in this case a controller). Does that make sense? – user1789573 Sep 29 '14 at 16:59
See this link for an explaination for what can or cannot be injected http://stackoverflow.com/questions/16828287/what-things-can-be-injected-into-others-in-angular-js – Abhishek Jain Sep 29 '14 at 17:19

Passing Controller into Controller in Javascript

2 Answers2