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 。

这是本答案的扩展

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 lement。我们还列出了模板。此模板已准备好绑定 SearchedValue ，并在我们的控制器 Ctrl.Search() 上调用操作。我们说控制器的名称是什么：'CustomerSearchCtrl'并要求运行时将其设为'Ctrl'（conrollerAs :)

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

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

这个控制器有什么好玩的？它有一个公共acton搜索，它可以通过this.访问所有的元素，例如this.$http。因为我们在VS中指示了intellisense中的angular.d.ts类型/接口

protected $http: ng.IHttpService

将被使用，我们以后可以轻松访问其方法。类似的是.then()

中返回值的类型

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

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

希望它有所帮助，在action here

中观察所有内容

Answer 2

您的构造函数和$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 数组必须适合构造函数参数列表

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

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

Answer 3

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

Answer 4

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

如何使用TypeScript Controller＆amp; amp;角度Js

4 个答案: