如何使用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 ){} 

4 Solutions collect form web for “如何使用TypeScript Controller&Angular Js绑定数据”

我决定添加另一个描述更多细节的答案,如何在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方法是私人的。 可能将其改为公众将解决问题。