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

Question

我正在使用Type Script.I已将我的角度js控制器转换为类型脚本但是我面临着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
    ){}

Answer 1

我决定添加另一个答案，描述更多详细信息如何创建和使用控制器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 = {};
}

我们可以看到，我们声明该指令可作为E元素使用。我们还内嵌了一个模板。SearchedValue该模板已准备好在我们的控制器上绑定并调用 Action Ctrl.Search()。我们正在说控制器的名称是什么：“CustomerSearchCtrl”并要求运行时将其设置为“Ctrl” （conrollerAs：）

最后我们将该对象注入到 Angular 模块中：

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"];
            });
    }
}

加上它的注册到模块中

app.controller('CustomerSearchCtrl',  CustomerSearch.CustomerSearchCtrl);

这个控制器有什么有趣的地方？它有一个公共行为搜索，可以通过 访问其所有成员this.，例如this.$http。因为我们在 VS 中指示了 angular.d.ts 类型/接口的智能感知

protected $http: ng.IHttpService

将会用到，我们稍后可以轻松访问它的方法。类似的是返回值的类型.then()

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

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

希望它能有所帮助，请观察这里的所有操作