AngularJS $injector.invoke - ParentController is not defined

Question

I have 2 controllers defined:

var myApp = angular.module('nestedControllersModule',[]); 
myApp.controller('ParentController', ['$scope', function($scope) { 
}]);

myApp.controller('ChildController', ['$scope', '$injector',  function($scope, $injector) { 

$injector.invoke(ParentController, this, {$scope: $scope}); 
}]);

This gives: ReferenceError: ParentController is not defined.

This code works only if ParentController is defined as:

function ParentController($scope) {}

I am trying to inject the parent in the child as then I can inherit the common functions defined in the parent.

var myApp = angular.module('nestedControllersModule',[]); 
myApp.controller('ParentController', ['$scope', function($scope) {
    $scope.name = 'ParentName'; 
    $scope.Type = 'ParentType'; 
    $scope.clickme = function() { 
        alert('This is parent controller "ParentController" calling'); 
    } 
}]);

myApp.controller('ChildController', ['$scope', '$injector', '$ParentController',  function($scope, $injector, $ParentController) { 
    $injector.invoke(ParentController, this, {$scope: $scope}); 
    $scope.name = 'Child';
}]);

What are you trying to do? Inject ParentController into ChildController? You don't have to use $injector for that. — chubbsondubs, Oct 18 '13 at 03:03

score 0 · Answer 1 · edited May 23 '17 at 10:25

myApp.controller('ParentController', ['$scope', function($scope) { 
}]);


myApp.controller('ChildController', ['$scope', 'ParentController',  function($scope, ParentController) {
    // ok now you have ParentController
}]);

But I think you need to use Services to share data/functions between Controllers or using PubSub model:

What's the correct way to communicate between controllers in AngularJS?

This reduces coupling between parts of your app.

score 0 · Answer 2 · answered Jan 07 '14 at 07:45

This is a basic workaround to achieve what you're after:

var myApp = angular.module('nestedControllersModule',[]); 
myApp.factory('ParentControllerFactory', function () {
    function ParentControllerFactory($scope) {
        $scope.name = 'ParentName'; 
        $scope.Type = 'ParentType'; 
        $scope.clickme = function() { 
            alert('This is parent controller "ParentController" calling'); 
        }
    }
    return (ParentControllerFactory);
})
.controller('ParentController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
    $injector.invoke(ParentControllerFactory, this, {
        $scope: $scope
    });
}]) 
.controller('ChildController', ['$scope', '$injector', 'ParentControllerFactory', function ($scope, $injector, ParentControllerFactory) {
    $injector.invoke(ParentControllerFactory, this, {
        $scope: $scope
    });
}]);

I say workaround because it's probably worthwhile looking into properly implementing a service to manage any commonality as previously mentioned (or better yet, splitting commonality into directives, clickme for example is a good candidate)

...also note that $injector.invoke(ParentControllerFactory as it is above will most likely chuck a hissy fit if/when you minify your scripts later on, so be careful where and how it used.

score 0 · Answer 3 · answered Nov 21 '14 at 18:16

Consider using the Mixin pattern possible by using the $controller service.

In your example, you would replace the $injector service with the $controller service:

var myApp = angular.module('nestedControllersModule',[]); 
myApp.controller('ParentController', ['$scope', function($scope) {
    $scope.name = 'ParentName'; 
    $scope.Type = 'ParentType'; 
    $scope.clickme = function() { 
        alert('This is parent controller "ParentController" calling'); 
    } 
}]);

myApp.controller('ChildController', ['$scope', '$controller', '$ParentController',  function($scope, $controller, $ParentController) {
    $controller('ParentController',{$scope: $scope})
    $scope.name = 'Child';
}]);

This is a good overview of using the $controller service: http://vadimpopa.com/split-large-angularjs-controllers-using-the-mixin-pattern/

AngularJS $injector.invoke - ParentController is not defined

3 Answers3