如何使用TypeScript Controller＆Angular Js绑定数据
我正在玩typesScript.I已经转换我的angular度js控制器到types脚本但im面临问题，在中继器。 （我附上了我的控制器代码如下： –
class CustomCtrl{ public customer; public ticket; public services; public cust_File; public ticket_file; public service_file; static $inject = ['$scope', '$http', '$templateCache']; constructor ( private $http, private $templateCache ){} 我决定添加另一个描述更多细节的答案，如何在TypeScript创build和使用控制器，并将其注入到angularJS 。
这是这个答案的延伸
我怎样才能使用TypeScript定义我的控制器？ 我们也有一个工作的重要人物
所以有这个指令：
export class CustomerSearchDirective implements ng.IDirective { public restrict: string = "E"; public replace: boolean = true; public template: string = "<div>" + "<input ng-model=\"SearchedValue\" />" + "<button ng-click=\"Ctrl.Search()\" >Search</button>" + "<p> for searched value <b>{{SearchedValue}}</b> " + " we found: <i>{{FoundResult}}</i></p>" + "</div>"; public controller: string = 'CustomerSearchCtrl'; public controllerAs: string = 'Ctrl'; public scope = {}; }
我们可以看到，我们宣布这个指令是可用的。 我们还插入了一个模板 。 这个模板准备绑定Ctrl.Search()并且在我们的控制器Ctrl.Search()上调用Action。 我们正在说什么是控制器的名称：“CustomerSearchCtrl”，并要求运行时，使其可用作为“Ctrl” （conrollerAs 🙂
最后我们将该对象注入angular度模块：
app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
我们可以使用$scope作为ng.IScope ，但为了获得更多的types访问权限，我们可以创build自己的接口 ：
export interface ICustomerSearchScope extends ng.IScope { SearchedValue: string; FoundResult: string; Ctrl: CustomerSearchCtrl; }
这样，我们知道，我们有stringFoundResult和其他stringFoundResult 。 我们还通知应用程序Ctrl将被注入到该范围，并将是typesCustomerSearchCtrl 。 这里是控制器：
export class CustomerSearchCtrl { static $inject = ["$scope", "$http"]; constructor(protected $scope: CustomerSearch.ICustomerSearchScope, protected $http: ng.IHttpService) { // todo } public Search(): void { this.$http .get("data.json") .then((response: ng.IHttpPromiseCallbackArg<any>) => { var data = response.data; this.$scope.FoundResult = data[this.$scope.SearchedValue] || data["Default"]; }); } }
加上注册模块
app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl);
这个控制器有趣的是什么？ 它有一个公共行动search，通过它可以访问所有的成员this. ，例如this.$http 。 因为我们在VS中指出了intellisense angular.d.tstypes/接口
protected $http: ng.IHttpService
将被使用，我们可以在以后轻松访问它的方法。 .then()的返回值的types类似
.then((response: ng.IHttpPromiseCallbackArg<any>) => {...
其中包含任何types的数据{} …
希望它有所帮助，观察这一切行动
你的构造函数和$inject有一个问题 – 这些必须合在一起
// wrong static $inject = ['$scope', '$http', '$templateCache']; constructor ( private $http, private $templateCache ){} // should be static $inject = ['$scope', '$http', '$templateCache']; constructor ( private $scope, private $http, private $templateCache ){}
事实上发生了什么 – 所有的参数都被移动了，
$http实际上就是$scope，等等…
简单地说， $inject数组必须适合构造函数参数列表
顺便说一句，这就是为什么我以前在这里： https : //stackoverflow.com/a/30482388/1679310build议在声明中使用types：
constructor(protected $scope: ICustomerScope, protected $http: ng.IHttpService, protected $templateCache: ng.ITemplateCacheService) { ... }
库Bindable TS是与打字机build立数据绑定的另一种方法。
从快速审查您的代码，我发现控制器的search方法是私人的。 可能将其改为公众将解决问题。
