javascript - JavaScript Angular 项目中的 TypeScript - 参数 'SearchCtrl' 不是函数或未定义

Question

我正在尝试使用 TypeScript 在具有现有 JavaScript 代码的项目中设置 Angular 搜索 Controller 。

下面是我的 Controller 。

/// <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 定义一个我想使用 Controller 的 div 时，我得到Argument 'SearchCtrl' is not a function, got undefined,

但是，如果我在 JS 中创建一个 Controller ，如下所示:

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

这个 Controller 可以在我的项目中的任何 Div 上使用。任何形式的帮助将不胜感激!

我已经与其他开发人员讨论过这个问题，并且由于我自己没有在 TypeScript 中做过很多工作，所以我们没有任何运气，但是我确信其他部分已经正确实现，这只是 TypeScript Controller 的问题也许在 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

Answer 1

我终于解决了，

下面是让我悲伤的一行:

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

更改为:

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

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