使用typescript类型时,AngularJS控制器“不是函数,未定义”

AngularJS controller “is not a function, got undefined” when using typescript type

我正在使用带有Typescript的AngularJS(v1.4.5)。我正在设置一个示例应用程序,以确保在愤怒开始使用Angular之前一切正常(呃,这很难说)。

我一直在这个Scott Logic博客文章中稍微基于我的设计。

我开始使用我的控制器作为应用程序模块(...)。控制器声明中的一个函数,它工作正常。

1
2
3
4
5
6
7
8
9
10
module Sample {
    var app = angular.module("beerApp", [])
        .controller("beerController", ($scope) => {
            $scope.beers = [
               "Corona",
               "Carlsberg",
               "Cronenberg"
            ];
        });
}

但我决定尝试拆分文件并正确执行,但我现在正在标题中收到错误。"错误:[ng:areq]参数'beerController'不是函数,未定义

这是我的应用程序。

index.cshtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    Beer list
    <!-- styles:css -->
    <link rel="stylesheet" href="/.build/css/appStyles.css">
    <!-- endinject -->
    <!-- vendors:js -->
    <script src="/.build/vendors/vendors.js">
    <!-- endinject -->
    <!-- app:js -->
    <script src="/.build/spa/app.js">
    <!-- endinject -->
</head>
<body>
    <main ng-app="beerApp">
       
            <p>
You can select from any of the following beers:
</p>
           
<ul>

                <li ng-repeat="beer in beers">
                    {{beer}}
               
</li>

           
</ul>

       
    </main>
</body>
</html>

app.ts(由gulp编译成app.js)

1
2
3
4
module Sample {
    var app = angular.module("beerApp", [])
        .controller('beerController', BeerController);
}

BeerController.ts(也由gulp编译成app.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module Sample {
    export interface IBeerScope extends ng.IScope {
        beers: string[];
    }

    export class BeerController {
        // needed so that uglify doesn't minify the special $scope variable name away
        public static $inject = ['$scope'];

        constructor(private $scope: IBeerScope) {
            $scope.beers = [
               "Corona",
               "Carlsberg",
               "Cronenberg"
            ];
        }
    }
}

无奈之下,我也尝试将BeerController.ts注释掉并将其粘贴到app.ts的底部以查看是否可以解决问题,看看它是否是文件包含问题,但这似乎没有帮助。

"不是一个功能"的东西让我想知道它是不是我的打字稿,但我不我正在阅读的博客文章似乎只是传入一个类型作为控制器的第二个参数,而angular.d.ts似乎表明没关系,即使它实际上没有表明类型可以作为第二个参数传递(我正在使用通过节点模块Typings抓取的DefinitelyTyped存储库上可用的角度类型)。

我知道AngularJS已经问了很多这个问题,我已经阅读了其中的一些问题,以确保答案尚未解决。但是我已经检查了所有常见的东西,而不是那些。必须是逃避我的事情。

我已经检查过的问题是:

  • Angular'PersonCtrl'不是函数,未定义
  • 具有Typescript错误的Angularjs:[ng:areq]参数'IndexViewModel'不是函数,未定义
  • 错误:参数不是函数,未定义
  • AngularJS错误:'参数'FirstCtrl'不是函数,未定义'
  • Angularjs:错误:[ng:areq]参数'HomeController'不是函数,未定义

感谢任何帮助。


好的,所以你的问题是文件的加载方式。

在您的课程定义后,使用Angular向下移动您的控制器注册,它将正常工作。

1
2
3
4
5
class BeerController {
   ...
}

angular.module("beerApp", []).controller("beerController", BeerController);

如果您在单独的文件中有这些定义,我建议您将模块定义移动到单个文件,并仅在控制器文件中注册您的控制器,如下所示。

app.js

1
angular.module("beerApp", []);

beerController.ts

1
2
3
4
5
class BeerController {
   ...
}

angular.module("beerApp").controller("beerController", BeerController);

看到这个运行JSFiddle