Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am trying to inherit an angularjs controller using Typescript's extends. But as soon as I extend the controller angularjs throws this error:

Error: Argument 'GenericLookupCtrl' is not a function, got undefined

Here is my simplified code of parent and child classes:

Parent first:

module Controllers.SolMan
{
    export class ParentCtrl
    {
        constructor(
            seUIConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IParentScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile)
        {
            console.log('parent');
        }
     }
}

Child:

module Controllers.SolMan {

    export class ChildCtrl extends ParentCtrl {
        constructor(
            seUIQueryConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IChildScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $compile);
                console.log('Child');
        }
    }
} 

Here is how the controllers are registered:

.controller('ParentCtrl', Controllers.ParentCtrl)
.controller('ChildCtrl', Controllers.ChildCtrl)

I can use plain angularjs inheritance of controllers but to call parent methods from child I have to extend the child because otherwise typescript gives error that it cannot find the method in parent.

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You need to ensure that ParentCtrl is defined before ChildCtrl. You can do that by properly ordering your script tags or your reference file or your requirejs config depending upon what method you are using.

Alternatively put them in the same file:

module Controllers.SolMan
{
    export class ParentCtrl
    {
        constructor(
            seUIConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IParentScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile)
        {
            console.log('parent');
        }
     }
}
module Controllers.SolMan {

    export class ChildCtrl extends ParentCtrl {
        constructor(
            seUIQueryConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IChildScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $compile);
                console.log('Child');
        }
    }
} 

There is more about TypeScript modules here

share|improve this answer
    
thanks! adding them in same file removed the error. But I would like them to be in separate files. Ok I understand now, you are referring to how the js files are included in my code and yes child is referenced before the parent. –  Haris Dec 6 '13 at 12:37
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.