如何使用TypeScript Controller和Angular Js绑定数据

我决定添加另一个答案，以描述更多详细信息，如何在其中创建和使用控制器

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

Ctrl.Search()

最后，我们将该对象注入角度模块：

app.directive("customerSearch", [() => new CustomerSearch.CustomerSearchDirective()]);

我们可以使用

$scope

ng.IScope

export interface ICustomerSearchScope  extends ng.IScope{    SearchedValue: string;    FoundResult: string;    Ctrl: CustomerSearchCtrl;}

这样，我们知道，我们有了string

SearchedValue

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

protected $http: ng.IHttpService

将被使用，我们以后可以轻松地访问其方法。类似的是返回值的类型

.then()

.then((response: ng.IHttpPromiseCallbackArg<any>) => {...

其中确实包含数据：任何类型的{} …

希望对您有所帮助，请注意此处所有 *** 作