javascript - 如何使用 TypeScript Controller 和 Angular Js 绑定(bind)数据

Question

我正在玩 Type Script。我已经将我的 angular js Controller 转换为 Type Script 但我在 ng-repeater 中遇到问题。 (我在下面附上了我的 Controller 代码:-

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 中添加另一个描述如何创建和使用 Controller 的更多细节的答案。 并将其注入(inject) angularJS 。

这是这个答案的扩展

How can I define my controller using TypeScript?我们还有a working 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元素可用。我们还内嵌了一个模板。此模板已准备好绑定(bind) SearchedValue 并在我们的 Controller 上调用 Action Ctrl.Search() 。我们说的是 Controller 的名称:“CustomerSearchCtrl”，并要求运行时将其作为“Ctrl”可用 (conrollerAs:)

最后我们将该对象注入(inject)到 Angular 模块中:

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

我们可以使用$scope作为ng.IScope ，但要对其进行更多类型的访问，我们可以创建自己的接口(interface):

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

这样，我们知道，我们有字符串 SearchedValue还有其他字符串 FoundResult .我们还通知应用程序 Ctrl 将被注入(inject)该范围，类型为 CustomerSearchCtrl。 . Controller 来了:

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);

这个 Controller 有什么有趣的地方？它有一个公共(public)搜索功能，可以通过 this. 访问其所有成员。 ，例如this.$http .因为我们在 VS 中指示了 intellisense 那个 angular.d.ts 类型/接口(interface)

protected $http: ng.IHttpService

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

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

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

希望对您有所帮助，请注意 action here 中的所有内容