如何使用 TypeScript 控制器和 Angular Js 绑定数据

Question

我正在使用 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
    ){}

Answer 1

库Bindable TS 是使用打字稿设置数据绑定的另一种方法。

Answer 2

我决定在 TypeScript 中添加另一个描述如何创建和使用控制器的详细信息并将其注入 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 元素使用。我们还嵌入了一个模板。此模板已准备好绑定 SearchedValue 并在我们的控制器 Ctrl.Search() 上调用 Action。我们说控制器的名称是什么：'CustomerSearchCtrl' 并要求运行时将其作为 'Ctrl' (conrollerAs:)

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

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

我们可以将$scope 用作ng.IScope，但要对它进行更多类型的访问，我们可以创建自己的接口：

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

这样，我们知道，我们有字符串SearchedValue 和其他字符串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>) => {...

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

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

Answer 3

您的构造函数和$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
){}

事实上发生了什么 - 所有参数都被移动了，$http 实际上是 $scope，等等......

简单地说，$inject 数组必须适合构造函数参数列表

顺便说一句，这就是我之前在这里的原因：https://stackoverflow.com/a/30482388/1679310 建议在声明中使用类型：

   constructor(protected $scope: ICustomerScope,
        protected $http: ng.IHttpService,
        protected $templateCache: ng.ITemplateCacheService)
    { ... }

Answer 4

通过快速查看您的代码，我发现控制器的 search 方法是私有的。可能将其更改为 public 将解决问题。