javascript - Cannot extend angularjs controller in typescript - Stack Overflow

admin管理员组

文章数量:1434921

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,
            $pile)
        {
            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,
            $pile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $pile);
                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.

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,
            $pile)
        {
            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,
            $pile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $pile);
                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.

• javascript
• angularjs
• inheritance
• typescript
• angularjs-controller

Share Improve this question Follow asked Dec 6, 2013 at 11:54 HarisHaris 72133 gold badges1919 silver badges3535 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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,
            $pile)
        {
            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,
            $pile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $pile);
                console.log('Child');
        }
    }
} 

There is more about TypeScript modules here

本文标签： javascriptCannot extend angularjs controller in typescriptStack Overflow