我正在使用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
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 = {}; }
我们可以看到,我们宣布这个指令可作为 ê 字元素。我们还内联了一个 模板 。此模板已准备好绑定 SearchedValue 并在我们的控制器上调用Action Ctrl.Search() 。我们说的是控制器的名称:“CustomerSearchCtrl”,并要求运行时使其以“ Ctrl”形式提供 (conrollerAs :)
SearchedValue
Ctrl.Search()
最后,我们将该对象注入角度模块:
app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);
我们可以使用$scopeas ng.IScope,但是要对其进行更多类型的访问,我们可以创建自己的 接口 :
$scope
ng.IScope
export interface ICustomerSearchScope extends ng.IScope { SearchedValue: string; FoundResult: string; Ctrl: CustomerSearchCtrl; }
这样,我们知道,我们有了string SearchedValue以及另一个string FoundResult。我们还通知应用程序Ctrl将被注入该范围,并且类型为CustomerSearchCtrl。控制器来了:
FoundResult
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"]; }); } }
加上其注册到模块
app.controller('CustomerSearchCtrl', CustomerSearch.CustomerSearchCtrl);
这个控制器有什么有趣的地方?它有一个公共actonSearch,可以通过this.例如访问其所有膜this.$http。因为我们在VS中指示了智能感知,即angular.d.ts类型/接口
this.
this.$http
protected $http: ng.IHttpService
将被使用,我们以后可以轻松地访问其方法。类似的是返回值的类型.then()
.then()
.then((response: ng.IHttpPromiseCallbackArg<any>) => {...
其中确实包含数据:任何类型的{} …
希望对您有所帮助,请注意此处所有操作