Typescript in einem JavaScript-Angular-Projekt - Argument ist 'SearchCtrl' ist keine Funktion oder ist nicht definiert

Question

Ich versuche, einen eckigen Suchcontroller in einem Projekt einzurichten, das vorhandenen JavaScript-Code enthält, der TypeScript verwendet.

unten ist mein 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); 
} 

ich importieren sie dann in der gemeinsamen _Layout Seite des Projekts

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

Dann, wenn die Verwendung ng-Controller ein div definiere ich den Controller verwenden möchten, ich Argument 'SearchCtrl' is not a function, got undefined bekommen,

Allerdings, wenn ich erstellen einen Controller in JS, wie unten:

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

diese Controller kann in jedem Div in meinem Projekt verwendet werden. Jede Art von Hilfe würde wirklich geschätzt werden!

Ich bin mit anderen Entwicklern darüber gewesen, und da niemand Bar selbst viel in TypeScript getan hat, hatten wir kein Glück, aber ich bin sicher, dass andere Teile korrekt implementiert wurden, es ist nur das Problem eines Typoskripts Controller in einem JavaScript-Projekt vielleicht?

Im Folgenden finden Sie die kompilierte 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

ich es schließlich geklappt,

unterhalb der Linie ist, die mir Kummer verursacht wurde:

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

Changed es an:

angular.module("GLA").controller("SearchCtrl", SearchCtrl); die global verfügbar, jedoch GLA.Controllers

Dies machte Controller Ich bin nicht sicher, was diese Zeichenfolge darstellt, oder warum es war ungültig mit dem GLA.Controller entfernen, wie ich es in ähnlicher Weise in anderen Projekten aufgebaut haben.