我正在玩 Type Script。我已将我的 angular js 控制器转换为 Type Script 但我在 ng-repeater 中遇到了问题。（我在下面附上了我的控制器代码：-
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并将其注入angularJS.
这是这个答案的扩展
如何使用 TypeScript 定义我的控制器？我们还有一个工作的plunker
所以有这个指令：
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 = {};
}
我们可以看到，我们声明该指令可用作E元素。我们还内联了一个模板。此模板已准备好在SearchedValue我们的控制器上绑定和调用 Action Ctrl.Search()。我们说的是控制器的名称是什么：“CustomerSearchCtrl”并要求运行时将其作为“Ctrl”使用（conrollerAs :)
最后，我们将该对象注入 angular module：
app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
我们可以使用$scopeas ng.IScope，但要对其进行更多类型的访问，我们可以创建自己的界面：
export interface ICustomerSearchScope extends ng.IScope
{
SearchedValue: string;
FoundResult: string;
Ctrl: CustomerSearchCtrl;
}
这样，我们知道，我们有 stringSearchedValue和其他 string FoundResult。我们还通知应用程序 Ctrl 将被注入到该作用域中，并且类型为CustomerSearchCtrl。控制器来了：
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"];
});
}
}
加上它在module中的注册
app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl);
这个控制器有什么有趣的地方？它有一个公共行动搜索，它可以通过this.例如访问其所有成员this.$http。因为我们在VS中指示了intellisense那个angular.d.ts类型/接口
protected $http: ng.IHttpService
将被使用，我们以后可以很容易地访问它的方法。类似的是返回值的类型.then()
.then((response: ng.IHttpPromiseCallbackArg<any>) => {...
其中包含数据：{} 任何类型...
您的构造函数存在一个问题$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
){}
其实发生了什么事-所有PARAMS的含义被感动了，这
$http是$scope在事实上，等...
简单地说，$inject数组必须适合构造函数参数列表
顺便说一句，这就是我之前在这里的原因：https : //stackoverflow.com/a/30482388/1679310建议在声明中使用类型：
constructor(protected $scope: ICustomerScope,
protected $http: ng.IHttpService,
protected $templateCache: ng.ITemplateCacheService)
{ ... }
库Bindable TS是使用 typescript 设置数据绑定的另一种方法。
通过快速查看您的代码，我发现search控制器的方法是私有的。可能将其更改为 public 将解决问题。