JavaScript Angular 项目中的 TypeScript - 参数是“SearchCtrl”不是函数或未定义答案

【问题标题】：TypeScript in a JavaScript Angular Project - Argument is 'SearchCtrl' is not a function or is undefinedJavaScript Angular 项目中的 TypeScript - 参数是“SearchCtrl”不是函数或未定义
【发布时间】：2017-01-25 13:57:46
【问题描述】：

我正在尝试使用 TypeScript 在具有现有 JavaScript 代码的项目中设置角度搜索控制器。

下面是我的控制器。

/// <reference path="../Models/ISearchSrvc.ts" />
/// <reference path="../Services/searchSrvc.ts"/>
module GLA.Controllers {
    export class SearchCtrl {
        searchService: Services.SearchSrvc;
        searchTerms: string;
        pattern: RegExp = /^\s*\w*\s*$/;
        static $inject = ["Services.SearchSrvc"];
        constuctor(service: Services.SearchSrvc) {
            this.searchService = service;
        }
        searchResults: Models.IResultsContainer;
        getSearch = () => {
            this.searchResults = this.searchService.search(this.searchTerms);
        }
    }
    angular.module("GLA").controller("GLA.Controllers.SearchCtrl", SearchCtrl);
}

然后我将它们导入到项目的共享 _Layout 页面中

<script src="~/Angular/Services/searchSrvc.js"></script>
<script src="~/Angular/Controllers/searchCtrl.js"></script>

然后当使用 ng-controller 定义一个我想使用控制器的 div 时，我得到Argument 'SearchCtrl' is not a function, got undefined，

但是，如果我在 JS 中创建一个控制器，如下所示：

GLA.controller('testCtrl',['$scope','searchSrvc', function($scopt, searchSrvc) {
$scopt.whatwhat = "whatwhat!!";
}])

这个控制器可以用在我项目中的任何 Div 上。任何形式的帮助将不胜感激！

我已经和其他开发人员一起讨论过这个问题，因为我自己在 TypeScript 中没有做过很多事情，所以我们没有任何运气，但是我确信其他部分已经正确实现，这只是 typescript 控制器的问题也许在 JavaScript 项目中？

下面是编译好的Controller：

/// <reference path="../Models/ISearchSrvc.ts" />
/// <reference path="../Services/searchSrvc.ts"/>
alert("loaded");
var GLA;
(function(GLA) {
    var Controllers;
    (function(Controllers) {
        var SearchCtrl = (function() {
            function SearchCtrl() {
                var _this = this;
                this.pattern = /^\s*\w*\s*$/;
                this.getSearch = function() {
                    _this.searchResults = _this.searchService.search(_this.searchTerms);
                };
            }
            SearchCtrl.prototype.constuctor = function(service) {
                this.searchService = service;
            };
            SearchCtrl.$inject = ["Services.SearchSrvc"];
            return SearchCtrl;
        }());
        Controllers.SearchCtrl = SearchCtrl;
        angular.module("GLA").controller("GLA.Controllers.SearchCtrl", SearchCtrl);
    })(Controllers = GLA.Controllers || (GLA.Controllers = {}));
})(GLA || (GLA = {}));
//# sourceMappingURL=searchCtrl.js.map

【问题讨论】：

你查看过从 TypeScript 源生成的 JavaScript 吗？
您是否收到任何控制台错误？
@MiteshPant 控制台中唯一的错误是指控制器不是函数/未定义的错误：-/
@Bludwarf 我有，我对 JavaScript 很陌生，所以不完全确定我在看什么。我发现 typescript 更容易一些，因为它与 C# 和其他 OOP 语言有相似之处。我将控制器添加到问题中，我添加了一个警报以确保它被加载。
不确定是不是这个原因，但是你的 constRuctor 方法有错别字constuctor(service: Services.SearchSrvc)

标签： javascript angularjs typescript

【解决方案1】：

我终于解决了，

下面是让我伤心的一句话：

angular.module("GLA").controller("GLA.Controllers.SearchCtrl", SearchCtrl);

改成：

angular.module("GLA").controller("SearchCtrl", SearchCtrl); 删除GLA.Controllers

这使得控制器在全球范围内可用，但是我不确定这个字符串代表什么，或者为什么它对 GLA.Controller 无效，因为我在其他项目中类似地构建了它。

【讨论】：